13518219792
jquery.uploadify批量上传控件
创新互联主营滦平网站建设的网络公司,主营网站建设方案,成都app软件开发公司,滦平h5微信小程序搭建,滦平网站营销推广欢迎滦平等地区企业咨询
[html]
link href="styles/uploadify.css" rel="stylesheet" type="text/css" /
script type="text/javascript" src="styles/uploadify.swf"/script
script type="text/javascript" src="javascripts/jquery.uploadify.min.js"/script
link href="styles/uploadify.css" rel="stylesheet" type="text/css" /
script type="text/javascript" src="styles/uploadify.swf"/script
script type="text/javascript" src="javascripts/jquery.uploadify.min.js"/script 还有jquery.js,你懂得!
这里注意哦,css文件会引用到这个图片哦,所以请你指定这个图片的位置哦,不然就没有显示这个叉叉哦,这个叉叉是删除按钮的哦,没有就是空白哦!
[javascript]
script
function snedUpLoad(){
var pid = $("#entityId").val(); //这个是我自己获取的自定义参数
var entityName = $("#entityName").val(); //同上
$("#uploadify").uploadify({ //初始化uploadify uploadify是input的id
//'debug' : false, //dubug模式 ,默认是false
'auto':false, //自动上传,就是控件自动上传,默认是true
'multi':true,
//'successTimeout':99999, //超时时间
'formData':{'pid':pid,'entityName':entityName },//我的参数列表
//'fileObjName':'uploadify', //服务器的属性名字
'uploader':'你的后台url地址;jsessionid=${pageContext.session.id}',//提交服务器路径,这里
说明下;jsessionid=${pageContext.session.id},这个是用于非IE内核的浏览器兼容的
'swf':"styles/uploadify.swf", //flash文件,官方的文件,引用上就是了
//'uploader': '/Home/Upload', //文件保存路径 用处不大
'buttonText': '文件上传', //按钮
//'height':'32', //浏览按钮的高度
//'width':'100', //浏览按钮的宽度
'fileTypeDesc':'支持的格式：', //在浏览窗口底部的文件类型下拉菜单中显示的文本
'fileTypeExts':'*.jpg;*.jpge;*.gif;*.png', //允许上传的文件后缀
'fileSizeLimit':'3MB', //上传文件的大小限制
'queueSizeLimit' : 25, //上传数量
'onSelectError':function(file, errorCode, errorMsg){ //返回一个错误，选择文件的时候触发
switch(errorCode) {
case -100:
alert("上传的文件数量已经超出系统限制的"+$('#file_upload').uploadify('settings','queueSizeLimit')+"个文件！");
break;
case -110:
alert("文件 ["+file.name+"] 大小超出系统限制的"+$('#file_upload').uploadify('settings','fileSizeLimit')+"大小！");
break;
case -120:
alert("文件 ["+file.name+"] 大小异常！");
break;
case -130:
alert("文件 ["+file.name+"] 类型不正确！");
break;
}
},
'onFallback':function(){ //检测FLASH失败调用
alert("您未安装FLASH控件，无法上传图片！请安装FLASH控件后再试。");
},
'onUploadSuccess':function(file, data, response){ //上传到服务器，服务器返回相应信息到data里
if(data){
var dataObj=eval("("+data+")");//转换为json对象
//$('#uploadify').uploadify('upload')
}
}
});
}
/script
script
function snedUpLoad(){
var pid = $("#entityId").val(); //这个是我自己获取的自定义参数
var entityName = $("#entityName").val(); //同上
$("#uploadify").uploadify({ //初始化uploadify uploadify是input的id
//'debug' : false, //dubug模式 ,默认是false
'auto':false, //自动上传,就是控件自动上传,默认是true
'multi':true,
//'successTimeout':99999, //超时时间
'formData':{'pid':pid,'entityName':entityName },//我的参数列表
//'fileObjName':'uploadify', //服务器的属性名字
'uploader':'你的后台url地址;jsessionid=${pageContext.session.id}',//提交服务器路径,这里
说明下;jsessionid=${pageContext.session.id},这个是用于非IE内核的浏览器兼容的
'swf':"styles/uploadify.swf", //flash文件,官方的文件,引用上就是了
//'uploader': '/Home/Upload', //文件保存路径 用处不大
'buttonText': '文件上传', //按钮
//'height':'32', //浏览按钮的高度
//'width':'100', //浏览按钮的宽度
'fileTypeDesc':'支持的格式：', //在浏览窗口底部的文件类型下拉菜单中显示的文本
'fileTypeExts':'*.jpg;*.jpge;*.gif;*.png', //允许上传的文件后缀
'fileSizeLimit':'3MB', //上传文件的大小限制
'queueSizeLimit' : 25, //上传数量
'onSelectError':function(file, errorCode, errorMsg){ //返回一个错误，选择文件的时候触发
switch(errorCode) {
case -100:
alert("上传的文件数量已经超出系统限制的"+$('#file_upload').uploadify('settings','queueSizeLimit')+"个文件！");
break;
case -110:
alert("文件 ["+file.name+"] 大小超出系统限制的"+$('#file_upload').uploadify('settings','fileSizeLimit')+"大小！");
break;
case -120:
alert("文件 ["+file.name+"] 大小异常！");
break;
case -130:
alert("文件 ["+file.name+"] 类型不正确！");
break;
}
},
'onFallback':function(){ //检测FLASH失败调用
alert("您未安装FLASH控件，无法上传图片！请安装FLASH控件后再试。");
},
'onUploadSuccess':function(file, data, response){ //上传到服务器，服务器返回相应信息到data里
if(data){
var dataObj=eval("("+data+")");//转换为json对象
//$('#uploadify').uploadify('upload')
}
}
});
}
/script
[javascript]
$(function(){
snedUpLoad(); //jquery容器加载完运行我们的函数
})
$(function(){
snedUpLoad(); //jquery容器加载完运行我们的函数
})
[html]
input type="file" name="uploadify" id="uploadify" / //申明控件的容器
input type="file" name="uploadify" id="uploadify" / //申明控件的容器
前台页面代码基本就这样了,很好明白,至于后台逻辑和普通上传处理一致的,这里就不列出来的,最后上一张图给大家鉴赏一下
(tip:其实他的批量上传并不是一次全部提交处理的,他是一个一个依次提交,相当是一个for循环,所以后台处理的同时只是一个文件上传,即排序的处理上传文件,就和单个文件上传的代码一样,如果你早有后台的单文件上传代码就不用改,直接调用就行了,可以共用)
用struts也可以实现 多文件上传
下面是我写的代码，作为参考！
/*文件目录*/
public static String [] fileArray={
"logo.png",
"index.swf",
"OEMInfo.txt",
"favicon.ico"};
/**
* @author Caoshun
* @see 接收并保存文件
* */
public static void receiveAndSaveAllFileByPath(ActionForm form,String rootPath1,String rootPath2){
String fileName="";
//获取表单中的文件资源
HashtableObject, Object files = form.getMultipartRequestHandler().getFileElements();
//遍历文件，并且循环保存
//当前处理文件序号
int file_num=1;
for (EnumerationObject e = files.keys(); e.hasMoreElements();) {
/*根据处理的当前文件下标，确定文件名*/
fileName=fileArray[file_num-1];
FormFile file = (FormFile) files.get((String) e.nextElement());
if (file != null file.getFileSize() 0) {
try {
//使用formfile.getInputStream()来获取一个文件的输入流进行保存。
//文件名
//String fileName = file.getFileName();
//System.out.println("debug in AddEnterpriceAction.java on line 152 fileName is : "+fileName);
//文件大小
//int fileSize = file.getFileSize();
//文件流
InputStream is = file.getInputStream();
//将输入流保存到文件
//String rootPath = this.servlet.getServletContext().getRealPath("files");
//往cn中写入
File rf = new File(rootPath1);
FileOutputStream fos = null;
fos = new FileOutputStream(new File(rf, fileName));
byte[] b = new byte[10240];
int real = 0;
real = is.read(b);
while (real 0) {
fos.write(b, 0, real);
real = is.read(b);
}
//往en中写入
File rf2 = new File(rootPath2);
InputStream is2 = file.getInputStream();
FileOutputStream fos2 = null;
fos2 = new FileOutputStream(new File(rf2, fileName));
byte[] b2 = new byte[10240];
int real2 = 0;
real2 = is2.read(b2);
while (real2 0) {
fos2.write(b2, 0, real2);
real2 = is2.read(b2);
}
//关闭文件流
fos.close();
is.close();
fos2.close();
is2.close();
} catch (RuntimeException e1) {
e1.printStackTrace();
} catch (Exception ee) {
ee.printStackTrace();
}
file.destroy();
}
file_num++;
}
}
文件从本地到服务器的功能，其实是为了解决目前浏览器不支持获取本地文件全路径。不得已而想到上传到服务器的固定目录，从而方便项目获取文件，进而使程序支持EXCEL批量导入数据。
java中文件上传到服务器的指定路径的代码：
在前台界面中输入：
form method="post" enctype="multipart/form-data" action="../manage/excelImport.do"
请选文件:input type="file" name="excelFile"
input type="submit" value="导入" onclick="return impExcel();"/
/form
action中获取前台传来数据并保存
/**
* excel 导入文件
* @return
* @throws IOException
*/
@RequestMapping("/usermanager/excelImport.do")
public String excelImport(
String filePath,
MultipartFile excelFile,HttpServletRequest request) throws IOException{
log.info("action:{} Method:{} start","usermanager","excelImport" );
if (excelFile != null){
String filename=excelFile.getOriginalFilename();
String a=request.getRealPath("u/cms/www/201509");
SaveFileFromInputStream(excelFile.getInputStream(),request.getRealPath("u/cms/www/201509"),filename);//保存到服务器的路径
}
log.info("action:{} Method:{} end","usermanager","excelImport" );
return "";
}
/**
* 将MultipartFile转化为file并保存到服务器上的某地
*/
public void SaveFileFromInputStream(InputStream stream,String path,String savefile) throws IOException
{
FileOutputStream fs=new FileOutputStream( path + "/"+ savefile);
System.out.println("------------"+path + "/"+ savefile);
byte[] buffer =new byte[1024*1024];
int bytesum = 0;
int byteread = 0;
while ((byteread=stream.read(buffer))!=-1)
{
bytesum+=byteread;
fs.write(buffer,0,byteread);
fs.flush();
}
fs.close();
stream.close();
}
