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