1、引入js文件
2、html文件
<input id="filecomment" class="data_sc data_sc1" type="hidden"> <span class="choseFile"> <input type="button" name="" id="browse" value="选取文件" /> </span>
<button id="start_upload">开始上传</button>
3、js初始化上传控件
//初始化上传控件 var uploader = new plupload.Uploader({ browse_button : 'browse', url : url,//对应的文件上传的后台路径 max_file_size: '20mb',//限制为20MB filters: { mime_types: [ //只允许上传图片文件 { title: "Excle文件", extensions: "xls,xlsx" } ] } }); uploader.init();//这句必须有 //文件添加时的事件 uploader.bind('FilesAdded', function (uploader, files) { var file = files[0]; document.getElementById("filecomment").innerHTML+='<p class="clearfloat" id="p_' + file.id + '"><var><a href="javascript:downloadfile(\'\');" id="down'+file.id+'" title="'+file.name+'">' + ' </a>(' + plupload.formatSize(file.size) + ')<b></b></var><span id="error_'+file.id+'"></span>'; }); //开始上传 document.getElementById('start_upload').onclick = function(){ if(document.getElementById("filecomment").text==''){ layer.msg("请选择附件后上传!"); return; } var name = $("#userName").val(); if (name == "" || name == null) { layer.msg("真实姓名不能为空"); return; } else if (name.length > 20) { layer.msg("姓名不能超过20位"); return; } uploader.start(); } uploader.bind('BeforeUpload', function (uploader, files) { var file = files[0]; //修改url向后台传参数 uploader.settings.url = url + "/saveFiles?file="+ $("#filecomment").val(); }); // 完成上传完了,成功或者失败,先删除进度条。 uploader.bind( 'uploadComplete', function( file ) { layer.msg("上传完成!"); currobj.showreportview(currobj.options.experimentId); }); // 完成上传完了,成功或者失败,先删除进度条。 uploader.bind( 'Error', function( uploader,errObject ) { var errcode=errObject.code; if(errcode==-600 ){ //alert(err.file.name+"文件大小已超过5Mb,请重新选择上传"); layer.msg(errObject.file.name+"文件大小已超过20Mb,请重新选择上传"); }else if( errcode==-601 ){ //alert(err.file.name+"文件格式错误,请重新选择上传"); layer.msg(errObject.file.name+"文件格式错误,请选择Excle格式的文件后重新上传"); }else{ $("#error_"+errObject.file.id).text(errObject.message+" 请删除,重新上传"); } });