189 8069 5689
jquery.uploadify批量上传控件
让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：空间域名、雅安服务器托管、营销软件、网站建设、临川网站维护、网站推广。
[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循环,所以后台处理的同时只是一个文件上传,即排序的处理上传文件,就和单个文件上传的代码一样,如果你早有后台的单文件上传代码就不用改,直接调用就行了,可以共用)
刚学完多文件上传，希望对你有帮助。
多文件上传，就是把多个文件一起传到指定的位置，他和单文件上传类似，只需要改动几个地方而已即可。首先是上传页面，由于要上传多个文件，所以就必须有多个供用户选择的文件框，然后修改Action，把action中属性的类型修改为list。
action如下：
public class UploadActionMany extends ActionSupport{
private ListFile upload;
private ListString uploadFileName;
public String execute() throws Exception {
// TODO Auto-generated method stub
System.out.print(upload.size());
if(upload!=null){
for (int i = 0; i upload.size(); i++) {
InputStream is=new FileInputStream(upload.get(i)); OutputStream os=new FileOutputStream("d:\\upload\\"+getUploadFileName().get(i)); byte buffer[]=new byte[1024];
int count=0;
while((count=is.read(buffer))0){
os.write(buffer,0,count);
}
os.close();
is.close();
}
}
return SUCCESS;
}
省略set和get方法
jsp如下：
html
head
title文件上传/title
/head
body
s:form action="upload.action" method="post" enctype="multipart/form-data" s:file name="upload" label="上传的文件一"/s:file
s:file name="upload" label="上传的文件二"/s:file
s:file name="upload" label="上传的文件三"/s:file
s:submit value="上传"/s:submit
/s:form
/body
/html
希望对你有帮助，打代码不容易啊，记得给点分
解决这种大文件上传不太可能用web上传的方式，只有自己开发插件或是当门客户端上传，或者用现有的ftp等。
1）开发一个web插件。用于上传文件。
2）开发一个FTP工具，不用web上传。
3）用现有的FTP工具。
下面是几款不错的插件，你可以试试：
1）Jquery的uploadify插件。具体使用。你可以看帮助文档。