JQuery批量上传插件Uploadify使用详解及参数说明
Uploadify是JQuery的一个上传插件，实现的效果非常不错，带进度显示。官方提供的实例是php版本的，您可以点击下面的链接进行浏览或下载。
∙ 官方下载
∙ 官方文档
∙ 官方演示
效果图：
 
部署和代码介绍： 
JSP前台页面:

<script type="text/javascript">
  $(document).ready( function() {
  $("#uploadify").uploadify( {//初始化函数

'uploader' :'uploadify.swf',oracle最新教程//flash文件位置，注意路径
'script' :'servlet/Upload',//后台处理的请求
'cancelImg' :'images/cancel.png',//取消按钮图片
'folder' :'uploads',//您想将文件保存到的路径
'queueID' :'fileQueue',//与下面的上传文件列表id对应
'queueSizeLimit' :8,//上传文件的数量
'scriptData':{'a':'value1','b':'value2'},//向后台传的数据
'fileDesc' :'rar文件或zip文件',//上传文件类型说明
'fileExt' :'*.rar;*.zip', //控制可上传文件的扩展名，启用本项时需同时声明fileDesc
'method':'get',//如果向后台传输数据，必须是get
'sizeLimit':1000,//文件上传的大小限制，单位是字节
'auto' :false,//是否自动上传
'multi' :true,
'simUploadLimit' :2,//同时上传文件的数量
'buttonText' :'BROWSE',//浏览按钮图片
'onComplete': function(event, queueID, fileObj,serverData,data) {//当上传完成后的回调函数，ajax方式哦~~
    alert(data.speed);
    }
  });
});


</script>



<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/jquery.uploadify.v2.1.0.min.js"></script>

<div id="fileQueue"></div>
<input type="file" name="uploadify" id="uploadify"/>
<p>
<a href学习雷锋好榜样="javascript:jQuery('#uploadify').uploadifyUpload()">开始上传</a> 
<a href="javascript:jQuery('#uploadify').uploadifyClearQueue()">取消所有上传</a>
</p>


java后台：

String savePath = ServletConfig().getServletContext().getRealPath("");

  savePath = savePath + "/uploads/";

  File f1 = new File(savePath);

  System.out.println(savePath);

  if (!f1.exists()) {

    f1.mkdirs();

  }

  DiskFileItemFactory fac = new DiskFileItemFactory();

  ServletFileUpload upload = new ServletFileUpload(fac);

  upload.setHeaderEncoding("utf-8");

  List fileList = null;

  try {

    fileList = upload.parseRequest(request);

  } catch (FileUploadException ex) {


    ex.printStackTrace();
    return;

  }

  Iterator it = fileList.iterator();

  while (it.hasNext()) {

    FileItem item = (FileItem) it.next();

    if (!item.isFormField()) {

    name = Name();


    long size = Size();

    String type = ContentType();

    if (name == null || im().equals("")) {

      continue;

    }

    // 扩展名格式：

    if (name.lastIndexOf(".") >= 0) {

      extName = name.substring(name.lastIndexOf("."));

    }

    File file = null;

    do {

      // 生成文件名：

      name = UUID.randomUUID().toString();

      file = new File(savePath + name + extName);

    } while (ists());


    File saveFile = new File(savePath + name + extName);

    try {

      item.write(saveFile);

    } catch (Exception e) {

      e.printStackTrace();

    }

    }

  }

  Writer().print(name + extName);

代码很好懂，不讲解了。


下面是官方英文文档的一些翻译。此文档是2.14版本的，现在出了3.0版本，属性和事件名称有改变，注意参考JS文件
Uploadify属性
属性名
类型
说明
auto
boolean
添加到队列后自动上传
buttonImg
string
浏览按钮的背景图片
buttonText
string
浏览按钮的显示文字
站长工具爱情岛
cancelImg
string
取消上传按钮的图片
checkScript
string
服务端用来检查文件是否重名的脚本
jquery下载文件请求
displayData
string
上传时显示的提示（percentage百分比/speed速度）
expressInstall
string
安装swf的文件(expressInstall.swf)路径
fileDataName
string
重定义的input的名称（后台）
fileDesc
string
文件打开对话框中的文件类型描述
fileExt
string
可允许上传的文件类型
folder
string
文件存储的文件夹
height
integer
浏览按钮的高度
hideButton
boolean
是否隐藏浏览按钮
method
string
表单提交方式（post/get）
multi
boolean
是否允许上传多个文件
queueID
string
上传队列的元素的ID
queueSizeLimit
integer
上传队列大小
removeCompleted
boolean
完成上传时是否自动删除
rollover
boolean
当鼠标移上时产生特效
script
string
上传表单提交的目标脚本
scriptAccess
string
swf的文件地址
scriptData
JSON
提交给后台的附加信息
simUploadLimit
integer
同时可上传的文件实例数
sizeLimit
integer
每文件的最大大小
uploader
string
uploadify上传的swf文件路径
width
integer
浏览按钮的宽度
wmode
小程序开发制作之类的
string
flash文件的wmode模式
Uploadify事件
java是由什么语言改进的
事件名
参数
说明
onAllComplete
function(event,data)
当所有文件上传完毕时触发
onCancel
function(event,ID,fileObj,data)
当某文件被取消上传时触发
onCheck
function()
当开始上传时检查是否重名
onClearQueue
function(event)
当执行uploadifyClearQueue()后执行
onComplete
function(event, ID, fileObj, response, data)
当某文件上传完毕时触发
onError
function(event,ID,fileObj,errorObj)
当上传时有错误返回时触发
onInit
function()
当uploadify实例加载完毕时触发
onOpen
function(event,ID,fileObj)
当某文件开始上传时触发
onProgress
function(event,ID,fileObj,data)
当某文件上传进度改变时触发
onQueueFull
function(event,queueSizeLimit)
当上传队列达到限制时触发
onSelect
function(event,ID,fileObj)
每个文件被添加到上传队列时触发
onSelectOnce
function(event,data)
一次文件被添加到上传队列时触发
onSWFReady
function()
当flash加载完毕时触发
Uploadify方法
方法名
说明
.uploadify()
创建Uploadify的实例
.uploadifyCancel()
从上传队列中移除一个文件
.uploadifyClearQueue()
清空上传队列
.uploadifySettings()
修改Uploadify实例的属性
.uploadifyUpload()
触法文件上传
分类: javascript, jquery

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。