当前位置：首页 > news >正文

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

news 2025/11/26 14:00:26

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