【前端】文件上传框架plupload使用（前后端交互）

这个框架是用来给前端设置文件上传的按钮的。
首先要明白，前端向后端发送请求的方式有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="&#xe602;">选择文件</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()方法开始上传文件，当然你也可以在其他地方调用该方法
        }
        
    }