Uploadify使用源码

上传图片页面绑定源码如下：

 1  $("#uploadify").uploadify({  
 2                  'uploader'       : basePath+'commons/uploadfiles/uploadify.swf?var='+(new Date()).getTime(),  // flash
 3                                                                                                                 // 文件
 4                                                                                                                 // 路径
 5                  'script'         : userDataServer+'asyAgentUploadMaterials.action',  // 请求的处理
 6                                                                                     // 的url
 7                                                                                     // ;
 8                  'fileDataName'   : 'uploadify',  // 后台 File xxx String
 9                                                     // xxxFileName 最好和input名字要一致
10                  'cancelImg'      : basePath+'commons/uploadfiles/cancel.png',  // 取消按钮图片
11                  'buttonImg'      : basePath+'commons/uploadfiles/buttonImg.png',
12                  'scriptData'     :{'signcode' : signcode},
13                  'queueSizeLimit' : 5,// 上传队列的上限
14                  'fileDesc'       : '支持格式:jpg/gif/jpeg/png/bmp.', // 如果配置了以下的'fileExt'属性，那么这个属性是必须的
15                  'fileExt'        : '*.jpg;*.gif;*.jpeg;*.png;*.bmp',// 允许的格式
16                                                                         // 弹出文件选择框的时候会自动过滤，只显示该类型的文件
17                  'auto'           : false,  // 添加文件后是否立即上传
18                  'multi'          : true , // 多文件上传
19                  'removeCompleted': false ,// 一个文件上传完是否移除该文件
20                  'sizeLimit'      : 1024*1024*4,// 文件大小的限制 以byte为单位 每个上传文件的大小
21                  'wmode'          : 'transparent',
22                  'queueID'        : 'uploadProgressBar',
23                  'onError'        : function (event,ID,fileObj,errorObj) {
24                                  var type = errorObj.type;
25                                  if(type && type.indexOf('Size') > -1){
26                                      alert("上传文件过大，超过4M！");
27                                  }else{
28                                      alert(errorObj.type + ' Error: ' + errorObj.info);
29                                  }
30                                  // 取消指定id的文件上传，然后把该文件移出队列
31                                  $('#uploadify').uploadifyCancel(ID);
32                                },
33                  'onQueueFull'    : function (event,queueSizeLimit) {
34                                  alert("你一次最多只能上传5个文件!");
35                                  return false;
36                                },
37                  'onComplete'    : function(event, ID, fileObj, response, data) {
38                                  var filenum=data.fileCount;
39                                  var title = fileObj.name;  
40                                    var data = JSON.parse(response);
41                                    if (data.tip != null && data.tip != '') {
42                                        flaguploadfileinfofalse+=title+",";
43                                 }else {
44                                     var datumId=$("#datumId").val();
45                                        var tenderId=$("#tenderId").val();
46                                        
47                                        var data = JSON.parse(response);
48 //                                           console.log('ok');
49                                 }
50                                    if(filenum==0||filenum=='0'){
51                                      if(flaguploadfileinfofalse.length>0){
52                                         alert(flaguploadfileinfofalse.substring(0,flaguploadfileinfofalse.length-2)+":上传失败！请联系管理员!");
53                                     }else{
54                                         alert("上传图片成功！");
55                                     }
56                                 }
57                                },
58                  'onAllComplete' : function(event,data) {
59                     $('#loading_all').hide();
60                     $('#uploadify').uploadifyClearQueue();
61 //                      alert("上传图片成功 ");
62                       reloadLeft();
63                       $("#showUploadDiv").dialog("close");
64                  }
65              });

涉及动态赋值问题：

/**
 * 上传材料dialog
 * 
 * @return
 */
function showUploadDatumDiv(){
    
   var datumId = $("#datumId").val();
   var tenderId =  $("#tenderId").val();
    if(datumId!=null&&datumId!=''&&tenderId!=null&&tenderId!=''){
    $("#showUploadDiv").dialog("option", "title", "上传图片");// 添加模式窗口标题
    $("#showUploadDiv").dialog("option", "buttons", // 添加两个按钮
            {
                "上传文件" : function() {
                $('#loading_all').show();
                $('#uploadify').uploadifySettings('scriptData',{'signcode' : signcode,'userID' : ownerid,'tenderId' : tid,'strMode' : datumId,'datumType' : endVal});
                $('#uploadify').uploadifyUpload();
                },
                "关闭" : function() {
                    $(this).dialog("close");
                }
            });
    $("#showUploadDiv").dialog('open');
    }else{
    alert("请点击要上传的材料类型！");    
    }
    
}

Uploadify是JQuery的一个上传插件，API参数解析如下：

uploader：uploadify.swf文件的相对路径，该swf文件是一个带有文字BROWSE的按钮，点击后淡出打开文件对话框，默认值：uploadify.swf。
script：后台处理程序的相对路径。默认值：uploadify.php
scriptData：上传到后台的参数，参数为json格式。
checkScript：用来判断上传选择的文件在服务器是否存在的后台处理程序的相对路径
fileDataName：设置一个名字，在服务器处理程序中根据该名字来取上传文件的数据。默认为Filedata
method：提交方式Post或Get，默认为Post
scriptAccess：flash脚本文件的访问模式，如果在本地测试设置为always，默认值：sameDomain
folder：上传文件存放的目录。
queueID：文件队列的ID，该ID与存放文件队列的div的ID一致。
queueSizeLimit：当允许多文件生成时，设置选择文件的个数，默认值：999。
multi：设置为true时可以上传多个文件。
auto：设置为true当选择文件后就直接上传了，为false需要点击上传按钮才上传。
fileDesc：这个属性值必须设置fileExt属性后才有效，用来设置选择文件对话框中的提示文本，如设置fileDesc为“请选择rar doc pdf文件”，打开文件选择。

fileExt：设置可以选择的文件的类型，格式如：'*.doc;*.pdf;*.rar'。
sizeLimit：上传文件的大小限制。
simUploadLimit：允许同时上传的个数默认值：1。
buttonText：浏览按钮的文本，默认值：BROWSE。
buttonImg：浏览按钮的图片的路径。
hideButton：设置为true则隐藏浏览按钮的图片。
rollover：值为true和false，设置为true时当鼠标移到浏览按钮上时有反转效果。
width：设置浏览按钮的宽度，默认值：110。
height：设置浏览按钮的高度，默认值：30。
wmode：设置该项为transparent可以使浏览按钮的flash背景文件透明，并且flash文件会被置为页面的最高层。默认值：opaque 。
cancelImg ：选择文件到文件队列中后的每一个文件上的关闭按钮图标。

onInit: 做一些初始化的工作。
onSelect：选择文件时触发，该函数有三个参数，参数如下：
　　event:事件对象。
　　queueID：文件的唯一标识，由6位随机字符组成。
　　fileObj：选择的文件对象，有name、size、creationDate、modificationDate、type5个属性。
onSelectOnce：在单文件或多文件上传时，选择文件时触发。该函数有两个参数event，data，data对象有以下几个属性：
fileCount：选择文件的总数。
filesSelected：同时选择文件的个数，如果一次选择了3个文件该属性值为3。
filesReplaced：如果文件队列中已经存在A和B两个文件，再次选择文件时又选择了A和B，该属性值为2。
allBytesTotal：所有选择的文件的总大小。
onCancel: 当点击文件队列中文件的关闭按钮或点击取消上传时触发。该函数有event、queueId、fileObj、data四个参数，前三个参数同onSelect中的三个参数，data对象有两个属性fileCount和allBytesTotal。
fileCount：取消一个文件后，文件队列中剩余文件的个数。
allBytesTotal：取消一个文件后，文件队列中剩余文件的大小。
onClearQueue：当调用函数fileUploadClearQueue时触发。有event和data两个参数，同onCancel中的两个对应参数。
onQueueFull：当设置了queueSizeLimit并且选择的文件个数超出了queueSizeLimit的值时触发。该函数有两个参数event和queueSizeLimit。
onError：当上传过程中发生错误时触发。该函数有event、queueId、fileObj、errorObj四个参数，其中前三个参数同上，errorObj对象有type和info两个属性。
type：错误的类型，有三种‘HTTP’,‘IO’,or‘Security’
info：错误的描述
onOpen：点击上传时触发，如果auto设置为true则是选择文件时触发，如果有多个文件上传则遍历整个文件队列。该函数有event、queueId、fileObj三个参数，参数的解释同上。
onProgress：点击上传时触发，如果auto设置为true则是选择文件时触发，如果有多个文件上传则遍历整个文件队列，在onOpen之后触发。该函数有event、queueId、fileObj、data四个参数，前三个参数的解释同上。data对象有四个属性percentage、bytesLoaded、allBytesLoaded、speed：
percentage：当前完成的百分比
bytesLoaded：当前上传的大小
allBytesLoaded：文件队列中已经上传完的大小
speed：上传速率 kb/s
onComplete：文件上传完成后触发。该函数有四个参数event、queueId、fileObj、response、data五个参数，前三个参数同上。response为后台处理程序返回的值，data有两个属性fileCount和speed:
fileCount：剩余没有上传完成的文件的个数。
speed：文件上传的平均速率 kb/s
注：fileObj对象和上面讲到的有些不太一样，onComplete的fileObj对象有个filePath属性可以取出上传文件的路径。
onAllComplete：文件队列中所有的文件上传完成后触发。该函数有event和data两个参数，data有四个属性，分别为：
filesUploaded :上传的所有文件个数。
errors ：出现错误的个数。
allBytesLoaded ：所有上传文件的总大小。
speed ：平均上传速率 kb/s

gaoshengchao

略懂开发

Uploadify使用源码

公告