ajax上传文件的原理与实现
ajax已经很普遍了,但使用 ajax上传文件自己却一直都没有涉及,我只知道挺复杂的,上传文件不同于上传一般的表单数据,必须特殊处理,知道一般ajax使用上传都是应用一个虚拟的iframe,但由于项目需要,在网上找了找,没想到找到了两个支持ajax上传文件的jquery插件,jquery.uploadify.js和dropzone.min.js两个都可以实现ajax上传文件,效果也不错。
1使用jquery.uploadify.js上传文件
这种上传方式,使用了Flash,因此需要引用一个特殊的js文件swfobject.js,低版本的需要引用,高版本的这个文件已经包含在jquery.uploadify.js中了。另外低版本的参数和高版本的参数也不太一样了。
使用Uploadify v3.2.1的完整前台代码
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="Scripts/jquery-1.8.0.min.js" type="text/javascript"></script> <script src="Styles/jquery.uploadify.js" type="text/javascript"></script> <link href="Styles/uploadify.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $(document).ready(function () { $("#uploadify").uploadify({ swf: 'Styles/uploadify.swf', uploader: 'Handler1.ashx?OperationType=upfile',//后台的处理地址 fileTypeDesc: '请选择excel文件', buttonText: '请选择excel文件', fileTypeExts: '*.xls', 'auto': false, onSelectError: function (file, errorCode, errorMsg) { switch (errorCode) { case -100: alert("上传的文件数量已经超出系统限制的" + $('#uploadify').uploadify('settings', 'queueSizeLimit') + "个文件!"); break; case -110: alert("文件 [" + file.name + "] 大小超出系统限制的" + $('#uploadify').uploadify('settings', 'fileSizeLimit') + "大小!"); break; case -120: alert("文件 [" + file.name + "] 大小异常!"); break; case -130: alert("文件 [" + file.name + "] 类型不正确!"); break; } }, onFallback: function () { alert("您未安装FLASH控件,无法上传图片!请安装FLASH控件后再试。"); }, //上传到服务器,服务器返回相应信息到data里 onUploadSuccess: function (file, data, response) { alert(data); }, onSelect: function (fileObj) { alert("文件名:" + fileObj.name + "\r\n" + "文件大小:" + fileObj.size + "\r\n" + "创建时间:" + fileObj.creationdate + "\r\n" + "最后修改时间:" + fileObj.modificationdate + "\r\n" + "文件类型:" + fileObj.type ); } }); }); function doUplaod() { $('#uploadify').uploadify('upload', '*'); } function closeLoad() { $('#uploadify').uploadify('cancel', '*'); } </script> </head> <body> <form id="form1" runat="server"> <div> <div> <div id="fileQueue"></div> <input type="file" name="uploadify" id="uploadify" /> <p> <a href="javascript:doUplaod()">上传</a>| <a href="javascript:closeLoad()">取消上传</a> </p> </div> </div> </form> </body> </html>
Uploadify v2.1.0的写法
由于没有swfobject.js,需要添加引用
<script src="Scripts/swfobject.js" type="text/javascript"></script>另外部分参数也不一样,例如uploader,script
完整的前台代码
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="Scripts/jquery-1.8.0.min.js" type="text/javascript"></script> <script src="Scripts/jquery.uploadify.v2.1.0.js" type="text/javascript"></script> <link href="Scripts/uploadify.css" rel="stylesheet" type="text/css" /> <script src="Scripts/swfobject.js" type="text/javascript"></script> <script type="text/javascript"> </script> <script type="text/javascript"> $(document).ready(function () { $("#uploadify").uploadify({ 'uploader': 'Scripts/uploadify1.swf', 'script': 'Handler1.ashx?OperationType=upfile', 'cancelImg': 'Scripts/cancel.png', 'folder': 'UploadFile', 'queueID': 'fileQueue', 'auto': false, 'multi': false, 'fileExt': '*.doc;*.xls', 'fileDesc': '请选择excel文件', 'onSelect': function (e, queueId, fileObj) { alert("唯一标识:" + queueId + "\r\n" + "文件名:" + fileObj.name + "\r\n" + "文件大小:" + fileObj.size + "\r\n" + "创建时间:" + fileObj.creationDate + "\r\n" + "最后修改时间:" + fileObj.modificationDate + "\r\n" + "文件类型:" + fileObj.type ); } }); }); </script> </head> <body> <form id="form1" runat="server"> <div> <div id="fileQueue"></div> <input type="file" name="uploadify" id="uploadify" /> <p> <a href="javascript:$('#uploadify').uploadifyUpload()">上传</a>| <a href="javascript:$('#uploadify').uploadifyClearQueue()">取消上传</a> </p> </div> </form> </body> </html>
2使用dropzone.min.js上传文件
没有使用Flash,但对浏览器要求比较高,例如IE10以上才支持,应该是使用了html5的技术
完整的前端代码、
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="Scripts/jquery-1.8.0.min.js" type="text/javascript"></script> <script src="Scripts/dropzone.min.js" type="text/javascript"></script> <link href="Scripts/dropzone.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> jQuery(function ($) { Dropzone.autoDiscover = false; try { var myDropzone = new Dropzone("#dropzone", { paramName: "FileData", // The name that will be used to transfer the file maxFilesize: 5, // MB dictRemoveFile: '移除文件', dictCancelUpload: '取消上传', addRemoveLinks: true, uploadMultiple: false, acceptedFiles: '.xls', autoProcessQueue: true, dictRemoveFile: "关闭", dictFileTooBig: '此文件过大', dictCancelUploadConfirmation: '确定取消上传吗?', dictInvalidInputType: "不支持此类型文件上传!", parallelUploads: 1, //限制上传文件数 url: "Handler1.ashx?OperationType=upfile", init: function () { this.on("success", function (file) { //console.log("File " + file.name + "uploaded"); alert("文件" + file.name + "上传成功"); }); this.on("complete", function (file) { this.removeFile(file); }); this.on("removedfile", function (file) { //alert(file.name); }); }, /* accept: function (file, done) { //if (file.name == "11.jpg") { // done("Naha, you don't."); //} //else { done(); },*/ success: function (file, data) { if (data.status === 1) { $scope.uploadImage = data.message; $scope.listUserImages(); } else { //alertService.showAlert({ // content: data.message, // type: 'warning' //}); //$('.dz-error-mark').show(); //alert(data.message); } }, dictDefaultMessage: '<span class="bigger-150 bolder"><i class="ace-icon fa fa-caret-right red"></i> 上传</span> 文件 \<span class="smaller-80 grey">点击</span> <br /> \<i class="upload-icon ace-icon fa fa-cloud-upload blue fa-3x"></i>', dictResponseError: 'Error while uploading file!', //change the previewTemplate to use Bootstrap progress bars previewTemplate: "<div class=\"dz-preview dz-file-preview\">\n <div class=\"dz-details\">\n <div class=\"dz-filename\"><span data-dz-name></span></div>\n <div class=\"dz-size\" data-dz-size></div>\n <img data-dz-thumbnail />\n </div>\n <div class=\"progress progress-small progress-striped active\"><div class=\"progress-bar progress-bar-success\" data-dz-uploadprogress></div></div>\n <div class=\"dz-success-mark\"><span></span></div>\n <div class=\"dz-error-mark\"><span></span></div>\n <div class=\"dz-error-message\"><span data-dz-errormessage></span></div>\n</div>" }); } catch (e) { alert('Dropzone.js does not support older browsers!'); } }); </script> </head> <body> <form id="dropzone" runat="server" action="Handler1.ashx?OperationType=upfile" class="dropzone dz-clickable" enctype="multipart/form-data" method="post"> <div class="dz-message" style="width:50px;height:50px;"> <i class="upload-icon ace-icon fa fa-cloud-upload blue fa-3x"></i> </div> <div> <div id="FileBed"></div>点击上传文件 <input type="file" multiple="multiple" class="dz-hidden-input" style="visibility: hidden; position: absolute; top: 0px; left: 0px; height: 0px; width: 0px;" /> </div> </form> </body> </html>
3后台处理代码
public class Handler1 : IHttpHandler { public void ProcessRequest(HttpContext context) { string operatype = context.Request.QueryString["OperationType"]; if (operatype == "upfile") { HttpPostedFile file = context.Request.Files["FileData"]; if (file != null) { string fullPath = System.IO.Path.Combine(System.IO.Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "update"), DateTime.Now.Date.ToString("yyyyMMdd")); file.SaveAs(fullPath + file.FileName); } } context.Response.ContentType = "text/plain"; context.Response.Write("上传成功"); } public bool IsReusable { get { return false; } } }
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。