JQuery插件ajaxfileupload.js异步上传文件实例
在服务器端做文件上传的过程中,如果使用web服务器短端的上传控件去上传文件的话,会导致页面刷新一次,这样对用户的体验就不是很友好了。ajaxfileupload.js是一款jQuery的异步上传文件插件,使用简单且容易上手。
前置条件:ajaxfileupload.js文件,百度下载一个就行。
JS引用:
<scriptsrc="/Content/JQueryJS/jquery-2.1.1.js"></script> <scriptsrc="/Content/Js/ajaxfileupload.js"></script>
html代码:
<inputid="fileToUpload"type="file"name="fileToUpload">
JS代码:
functionsaveCInfo(){ varfilename=document.getElementById("fileToUpload").value; if(filename!=""){ $.ajaxFileUpload({ url:'../Order/OrderExec.ashx?oprMode=fileUpload'+"&filename="+filename+"&billno="+billno+"&companyname="+companyname, secureuri:false, fileElementId:'fileToUpload',//上传控件ID //dataType:'json', error:function(){alert('error');}, success:function(datax){ if(datax!=""){ msgShow('系统提示','上传成功!','info'); }else{ msgShow('系统提示','上传失败!','info'); } } }); }else{ $.messager.alert('提示','请选择上传文件','info'); } }
后台代码:
publicvoidFileUpload(HttpContextcontext) { try { context.Response.ContentType="text/html"; stringcompanyname=context.Request.Params["companyname"]; stringbillno=context.Request.Params["billno"]; stringfilename=context.Request.Params["filename"]; stringname=companyname+"_"+billno+"_"+filename; HttpFileCollectionfiles=HttpContext.Current.Request.Files; //指定上传文件在服务器上的保存路径 stringsavePath=context.Server.MapPath("~/upload/"); //检查服务器上是否存在这个物理路径,如果不存在则创建 if(!System.IO.Directory.Exists(savePath)) { System.IO.Directory.CreateDirectory(savePath); } savePath=savePath+name;//上传文件路径 files[0].SaveAs(savePath);//保存文件 context.Response.Write(savePath); } catch(Exceptionex) { context.Response.Write("FileUpload:"+ex.Message); }
}