百度上传组件web uploader介绍+快速入门案例

百度上传组件web uploader入门

公司的项目需要文件上传的功能，之前使用的是SWFUpload这个上传组件，我将其替换成了web uploader。

SWFUpload组件

SWFUpload 最初是Vinterwebb.se 开发的客户端文件上传工具。它联合javascript和flash，在浏览器中提供一个优于传统上传标签 的功能（和良好的用户体验）。

SWFUpload 的主要特性:

文件浏览对话框中可以选择多个文件
AJAX风格的上传，不用重刷新
上传过程中的各种事件.
可以在客户端调节图片大小
它使用的类命名空间兼容各种js库(i.e., jQuery, Prototype, 等.).
支持 Flash 9 and Flash 10 (2.2.0版本后取消对flash 8的支持)
SWFUpload 的设计理念与其他基于flash的上传工具不同。SWFUpload 给开发者尽可能多的UI控制能力. 开发者可以使用 XHTML, CSS, JavaScript 来使它更符合自己网站的样式风格. 它提供一组简单的js事件更新上传状态，开发者可以根据这些事件来在网页中显示文件上传进度

不过不幸的是 Flash Player 10 迫使我们不得不用一个按钮（点击后）才能触发文件选择对话框，但SWFUpload允许开发者用js来修改这个按钮的文字等外观。

从介绍可以看出这个组件是比较老的，主要使用flash来实现上传，在传统上传标签 无法实现多文件上传的时候，他使用flash来实现了。但是新的HTML5中，新加入了multiple属性，只要就可以直接实现多文件上传，此时flash就显得没有必要了。

所以经过一些了解之后，我选择了百度的web Uploader这个上传组件。

百度 web uploader组件

WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用原来的FLASH运行时，兼容IE6+，iOS 6+, android 4+。两套运行时，同样的调用方式，可供用户任意选用。
采用大文件分片并发上传，极大的提高了文件上传效率。

该插件使用了HTML5的新特性，以传统的input file 为主，结合flash，使得他在兼容性方面有很大的优势。同时支持移动端上传，非常强大。

官网网址：http://fex.baidu.com/webuploader/

简单示例和解释

下面是一个简单的示例，我详细做了注释：

  //初始化Packing list_uploader对象var Packing_list_uploader = WebUploader.create({      // swf文件路径       swf:  'js/webuploader/webuploader-0.1.5/Uploader.swf',      // 文件接收服务端。      server: 'UploadOrderFile.action',      // 选择文件的按钮。可选。      // 内部根据当前运行是创建，可能是input元素，也可能是flash.      pick: {        "id":'#packinglist_show_falsh',           "multiple":false   //禁止多选。           },        // 文件进入队列后自动开始上传      auto: true,      //分片上传设置      chunked:true,  //允许分片      chunkSize:2*1024*1024, //每片大小2M      chunkRetry:4,  //分片上传失败之后的重试次数      threads:3,  //上传并发数。允许同时最大3个上传进程      //去重      duplicate:true,      //上传文件个数限制      fileNumLimit:20,      //单个文件大小限制  20M      fileSingleSizeLimit:20*1024*1024,      //传入文件格式限制，只能上传doc,docx,pdf格式的文件    accept: {        title: 'Applications',        extensions: 'doc,docx,pdf',        mimeTypes: 'application/pdf, application/msword'    },               //重要参数:跟后台文件组件的对接参数，后台文件组件叫做upload。      fileVal:"upload",      //传入参数。这两个参数会跟文件一起传给后台，用于跟后台对接，确认文件的来源。      formData:{        //这里的两个参数是为了跟后台对接，让后台知道上传的文件存在哪里。          "ttype":"qc_packinglist",          "task":"createqc"      },              });

上边的部分就是上传对象的初始化，我这里是文件上传，跟图片上传略有差异，还有其他很多参数，可以去官网查询API，都写得很清楚。

由于我实在项目中替换原有的上传组件，所以不希望改动界面布局和UI，直接将之前的布局沿用过来，通过id让组件和页面div联系起来。
所以我给初始化之后的对象，增加了一系列属性，属性值设为HTML中相应部分的标签id，通过这些id，在事件中编写相应的函数，可以在不改变界面布局和UI的前提下替换组件。下面是我增加的属性和值。

//给Packing list_uploader对象增加我们自己项目所需要的下列属性：Packing_list_uploader.bar_id="packing_list_file_panel",        //文件上传面板，文件显示，进度条，被他包裹在里边。       Packing_list_uploader.full_progress_bar_id="packing_report_bar",     //进度条总长度的divPacking_list_uploader.percent_bar_id="packing_report_progress_bar",   //进度条width变化的divPacking_list_uploader.related_var="PackingList",     //realated_var表示相关的变量，在一个<input type="hidden">标签中，不在网页中显示，一般用来传递参数。文件上传之后value的值变为has，若必填，检验value的值是否为空。Packing_list_uploader.file_link_id="packinglist_file_link",           //文件上传成功后在id为 order_link的<a>标签中显示文件名，点击可以下载。Packing_list_uploader.swf_panel_id="packinglist_show_falsh",     //放上传flash图标的地方           Packing_list_uploader.del_panel_id="packinglist_show_delete";    //放删除flash图标的地方//这里多设置了type和task，是因为我没法取得web uploader本身的formDate中的ttype和task的值，不然是可以直接用他们的。Packing_list_uploader.type="qc_packinglist";Packing_list_uploader.task="createqc";

最后，得到了需要的对象之后，还需要根据web uploader组件自带的事件来绑定事件函数，得到自己需要的效果。下边的代码是我设置的事件绑定。

//给Packing_list_uploader对象绑定事件和事件函数//当发生错误的时候触发，判断错误类型，并返回相应的提示。Packing_list_uploader.on("error",show_error); // 当有文件添加进来的时候，在文件列表中插入div节点，在网页中显示被插入的文件，包含文件名和等待上传和移除Packing_list_uploader.on( 'fileQueued',queued );        // 文件上传过程中创建进度条实时显示。上传过程中触发uploadProgress事件，执行函数：Packing_list_uploader.on( 'uploadProgress',uploading );//上传成功后显示文件，切换到删除键等。Packing_list_uploader.on( 'uploadSuccess',upload_ok );

上边的代码中我绑定了一些事件函数，这些函数我写在下边了，也有详细的注释。而且可以支持不同的上传框复用。

//下边所有的函数，都是需要上传的时候公用的函数。不同的uploader对象共用的事件绑定函数  和  这些事件绑定函数中需要调用的函数。//发生错误时候调用的函数var show_error=function show_error(type){    if (type=="Q_EXCEED_NUM_LIMIT"){        alert("此处文件数量不能大于1个");    }else if(type=="F_EXCEED_SIZE"){        alert("此处文件大小不能大于20M");    }else if(type=="Q_TYPE_DENIED"){        alert("此处文件类型必须是XXX");    }};//文件进入队列时调用的函数var queued=function queued( file ) {    $("#"+this.bar_id).html("");  //将bar_id对象中的内容清空    var  div='<li><div id="'+this.full_progress_bar_id + '" style="position:relative;width:183px;left:10px;height:8px;display:inline-block;border:1px solid #ccc;list-style:none;margin-top:6px;"><div id="' + this.percent_bar_id +'" style="position:absolute;background-color:#F36861;width:0%;height:8px"></div></div></li>';    $("#"+this.bar_id).append( div);   //加入显示进度条所需的div};//文件上传过程中调用的函数var uploading=function( file, percentage ) {    $("#"+this.percent_bar_id).css( 'width', percentage * 100 + '%');      };//文件上传成功后调用的函数var upload_ok=function( file ) {     //上传成功时触发uploadSuccess函数，将之前的  上传中  再替换为   已上传。    //调用GetFileList函数，该函数下边    GetFileList(this.type, this.task, this.bar_id, this.related_var,100, this.file_link_id);    //$("#"+this.related_var).next().find("label").remove();//清除上传文件提示    $("#" + this.swf_panel_id).hide();     //上传成功后隐藏上传的flash按钮         $("#" + this.del_panel_id).show();     //上传成功后显示删除文件的flash按钮      //取出对应实例    的参数    var type = this.type;    var task = this.task;    var swf_panel_id = this.swf_panel_id;    var del_panel_id = this.del_panel_id;    var file_link_id = this.file_link_id;    var related_var = this.related_var;     $("#" + this.del_panel_id).click(function(){   //给  删除文件的flash按钮的  click事件绑定    删除上传的文件    的函数        //切换回到上传文件的状态。      该函数在下边。        removeUploadFile(type, task, swf_panel_id, file_link_id, del_panel_id);        $("#" + related_var ).val("");    });};//下面是一些上边的调用函数中需要调用的函数：//取得上传成功的文件，通过该文件制作一个用于点击下载的<a>标签，放入文件上传的地方。function GetFileList( ty,task, divname,varname, max_len, f_id ){    var url = 'GetFileList.action';    var params = {"type":ty, "task":task };    $.ajax({        url:url,        type:"POST",        data:params,        dataType:"json",        success:function (data){            var storeObj = document.getElementById(divname);              var t=storeObj.childNodes.length;            for(var i=t-1;i>=0;i--)            {                storeObj.removeChild(storeObj.childNodes[i]);            }            for(var i = 0 ; i <data.list.length; i ++)            {                var li= document.createElement("li");                var filename =  data.list[i].filename;                if( max_len != null && max_len !=undefined && max_len != 'undefined' ){                }                //上传成功后显示文件名字（若太长则显示一部分+省略号...+扩展名），可下载的链接。                li.innerHTML="<a id='"+ f_id + "' href='Download.action?fileid=" + data.list[i].fid+ "' title='" + filename + "'>"+decreaseString(filename,20,true)+" </a>";                storeObj.appendChild(li);            }             if( data.list.length > 0 )            {                var  vv = document.getElementById(varname);                if( vv != null )                    vv.value = "has";            }        }    });}//根据传入的参数type,task跟后台通信定位文件，删除成功，那么使用上边的switch_delete函数重新切换到上传文件的状态。function  removeUploadFile( type, task, swf_panel_id, swf_filebar_id, del_panel_id ){    var url = 'RemoveUploadFile.action';    //通信删除动作    var params = {"type":type, "task":task };    $.ajax({        url:url,        type:"POST",        data:params,        dataType:"json",        success:function(jdata){            if( jdata.result=="success"){   //判断删除是否成功。                //删除成功后重新切换到上传文件。                switch_delete(swf_panel_id, del_panel_id, swf_filebar_id);            }        },    });}//（点击删除文件后）重新切换到上传文件function switch_delete( flash_id, delete_id, fileplace_id ){        $("#" + flash_id).show();      //显示上传文件的按钮    $("#" + delete_id ).hide();       //隐藏删除文件的按钮    $("#" + fileplace_id ).replaceWith("<li style='text-align:center;color:#BDC3C7;font-size:13px;'>Upload you document</li>");   //将显示区域的内容替换为上传提示}