ajax上传文件的原理与实现
来源：互联网 发布：c4dr19中文版软件下载 编辑：程序博客网 时间：2024/04/28 12:36
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; } } }
源代码下载
1 0
- ajax上传文件的原理与实现
- ajax上传文件的原理与实现
- atitit.ajax上传文件的实现原理 与设计
- JQuery的AJAX与Spring MVC实现异步文件上传
- AJAX动态上传文件的原理
- Ajax与JSF组件实现文件上传
- ajax与html5实现异步文件上传
- 文件上传原理:Web上传文件的原理及实现
- Ajax实现文件上传
- AJAX文件上传实现
- ajax实现文件上传
- Ajax实现文件上传
- ajax实现文件上传
- ajax实现文件上传
- ajax实现上传文件
- ajax 实现文件上传
- jquery form插件(ajax)上传文件实现及原理
- ajax上传文件方法 原理
- OC category类别的使用
- linux获取系统信息的常用命令
- 关于eclipse部署项目后，在tomcat中的webapps文件夹下没有项目
- 【什么是对象，为什么要面向对象，怎么才能面向对象？】
- DZ 升级到X3.2后,UCenter用户管理中心进不了了
- ajax上传文件的原理与实现
- js中date与String转换
- Number of Islands
- 鹰眼摄像头（OV7725）的使用
- 从五一促销“探营”运营商的薄利多销
- zoj 1119 SPF （tarjan求割点的联通分量数）
- linux 启动流程
- HTML（子页发布会）
- matlab subspace函数 求解矩阵子空间的夹角（链接）
