这个框架是用来给前端设置文件上传的按钮的。
首先要明白,前端向后端发送请求的方式有get和post,两者的区别在于,前者只能在网址中携带参数,后者是在请求体body中携带参数。
Plupload向后端发送请求是post请求方式,发送文件的方式是一个一个文件发送,或者是将文件分为多chunk,以chunk为单位发送。
代码示例如下。
function InitUpload() {filters={};uploader = new plupload.Uploader({runtimes: 'html5,flash,silverlight,html4',browse_button: 'SelectFile',url:'请求url网址',chunk_size: "4mb",flash_swf_url: '../Content/plupload/js/Moxie.swf',silverlight_xap_url: '../Content/plupload/js/Moxie.xap',filters: filters,init: {PostInit: function () { $("#filelist").html(""); },BeforeUpload:function(up,file){itemCode = file.name.split(".")[0].split("_")[0];custoName = document.getElementById('custoMer').value;uploader.setOption("multipart_params", {"user":Cur_User,"text" : custoName,"Item_Code":itemCode,"UploadState":"添加成功"})$('#dlg').dialog('close');},FilesAdded: function (up, files) {GenFileTable(up.files);},UploadProgress: function (up, file) {$("#filelist").find("#Span_" + file.id).text(file.percent + "%");},FileUploaded: function (up, file, ret) {dodel("#"+file.id);//$("#"+file.id).remove();$('#dg').datagrid('reload');console.log(ret);},UploadComplete: function (up, file) {$("#fileListItem").remove();resetUploader();$('#dg').datagrid('reload');alert("上传完成");},Error: function (up, err) {$("#filelist").html('<font style="color:red;">文件上传错误!' + err.code + ',' + err.message + '</font>');$.messager.show({ title: '错误提示', msg: err.message });}}});
各种属性值所代表的意思:
plupload示例所拥有的方法
事件说明:
这个组件使用也很简单,就是设置表单之后,html中设置相应按钮,(选择文件按钮,以及开始上传按钮)。然后分别绑定上相应的事件就可以了。
html 代码:其中SelectFile的按钮就是选择文件按钮,将其id设置给browse_button属性值,就能选择文件。
<div id="dlg" class="easyui-dialog" title="wor" style="width: 600px; height: 400px; padding: 10px 20px;" closed="true" buttons="#dg-buttons"><form id="uploadForm"><label for='custoMer'>客户名称:</label><input type="text" name="custoMer" id="custoMer"><button id="SelectFile" href="javascript:void(0);" iconcls="">选择文件</button></form><div id="filelist"></div> </div> <div id="dg-buttons" style="display:block"><a id="start_upload" href="javascript:void(0)" class="easyui-linkbutton" plain="true">确认并添加水印</a><a href="javascript:void(0)" class="easyui-linkbutton" plain="true" onclick="javascript:$('#dlg').dialog('close')" >取消</a></div>
想要设置确认按钮就开始上传。js设置监听事件。
document.getElementById('start_upload').onclick = function(event){//阻止默认事件event.preventDefault();custoName = document.getElementById('custoMer').value;if(custoName=="" || custoName==null) {$.messager.show({ title: '错误提示', msg: "请输入客户名!" });}else{uploader.start(); //调用实例对象的start()方法开始上传文件,当然你也可以在其他地方调用该方法}}