ajaxFileUpload.js 无刷新上传图片，支持多个参数同时上传，支持 ie6-ie10

Ajax 前端之家
前端之家收集整理的这篇文章主要介绍了ajaxFileUpload.js 无刷新上传图片，支持多个参数同时上传，支持 ie6-ie10，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

ajaxFileUpload 无刷新上传的原理：

在页面动态创建 form 表单和 ifram 贞，设定 form 表单提交的目标为 ifram 贞，
将文件域和要 post 的参数动态写入 form 表单中，然后提交 from 表单。
通过 window.attachEvent 向 ifram 贞的 onload 事件中注册监听事件响应回调函数。

1.html 部分

  1. <input name="imgfile1" id="imgfile1" style="width:200px; height:25px;" size="38" type="file"/> 
  2. <div id="imgContainer1"></div>


2.调用部分 

  1. function uploadImg(imgfileId,imgcontainerId) {  
  2.   $.ajaxFileUpload({  
  3.     fileElementId: imgfileId,url: '/UploadImage',dataType: 'json',data: { id: 'aaa',name: 'bbb' },beforeSend: function (XMLHttpRequest) {  
  4.       //("loading");  
  5.     },success: function (data,textStatus) {  
  6.       var img = "<img src='' width='300' height='300' />";  
  7.       $("#" + imgcontainerId).append(img);  
  8.     },error: function (XMLHttpRequest,textStatus,errorThrown) {  
  9.       var img = "图片上传失败！";  
  10.       $("#" + imgcontainerId).append(img);  
  11.       var msg = "服务器出错，错误内容：" + XMLHttpRequest.responseText;  
  12.       $.messager.showWin({ msg: msg,title: '错误提示',color: 'red' });  
  13.     },complete: function (XMLHttpRequest,textStatus) {  
  14.       //("loaded");  
  15.     }  
  16.   });  
  17. }


3.ajaxFileUpload.js 全部代码


  1. /* 
  2.   131108-xxj-ajaxFileUpload.js 无刷新上传图片 jquery 插件，支持 ie6-ie10  
  3.   依赖：jquery-1.6.1.min.js 
  4.   主方法：ajaxFileUpload 接受 json 对象参数 
  5.   参数说明： 
  6.   fileElementId：必选,上传文件域ID 
  7.   url：必选，发送请求的URL字符串 
  8.   fileFilter：可选，限定上传文件的格式（.jpg,.bmp,.gif,.png） 
  9.   fileSize:可选，0 为无限制(IE浏览器不兼容) 
  10.   data:可选，将和文件域一同post的参数（json对象） 
  11.   其它：$.ajax 的参数均为可选参数 
  12.   注：如遇到‘无法访问’的脚本错误提示则需要在响应流中加一段脚块一同输出：<script ...>document.domain = 'xxx.com';</script> 
  13. */  
  14. jQuery.extend({  
  15.   //创建 iframe 元素,接受提交及响应  
  16.   createUploadIframe: function(id,uri) {  
  17.     //create frame  
  18.     var frameId = 'jUploadFrame' + id;  
  19.   
  20.   
  21.     if (window.ActiveXObject) {  
  22.       //fix ie9 and ie 10-------------  
  23.       if (jQuery.browser.version == "9.0" || jQuery.browser.version == "10.0") {  
  24.         var io = document.createElement('iframe');  
  25.         io.id = frameId;  
  26.         io.name = frameId;  
  27.       } else if (jQuery.browser.version == "6.0" || jQuery.browser.version == "7.0" || jQuery.browser.version == "8.0") {  
  28.         var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />');  
  29.         if (typeof uri == 'boolean') {  
  30.           io.src = 'javascript:false';  
  31.         } else if (typeof uri == 'string') {  
  32.           io.src = uri;  
  33.         }  
  34.       }  
  35.     } else {  
  36.       var io = document.createElement('iframe');  
  37.       io.id = frameId;  
  38.       io.name = frameId;  
  39.     }  
  40.     io.style.position = 'absolute';  
  41.     io.style.top = '-1000px';  
  42.     io.style.left = '-1000px';  
  43.   
  44.   
  45.     document.body.appendChild(io);  
  46.   
  47.   
  48.     return io;  
  49.   },//创建 from 元素，用于提交的表单  
  50.   createUploadForm: function(id,fileElementId,postData) {  
  51.     //create form<span style="white-space:pre">   </span>  
  52.     var formId = 'jUploadForm' + id;  
  53.     var fileId = 'jUploadFile' + id;  
  54.     var form = $('<form  action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');  
  55.     var oldElement = $('#' + fileElementId);  
  56.     var newElement = $(oldElement).clone();  
  57.   
  58.   
  59.     $(oldElement).attr('id',fileId);  
  60.     $(oldElement).before(newElement);  
  61.     $(oldElement).appendTo(form);  
  62.     //添加自定义参数  
  63.     if (postData) {  
  64.       //递归遍历JSON所有键值  
  65.   
  66.   
  67.       function recurJson(json) {  
  68.         for (var i in json) {  
  69.           //alert(i+"="+json[i])  
  70.           $("<input name='" + i + "' id='" + i + "' value='" + json[i] + "' />").appendTo(form);  
  71.           if (typeof json[i] == "object") {  
  72.             recurJson(json[i]);  
  73.           }  
  74.         }  
  75.       }  
  76.   
  77.   
  78.       recurJson(postData);  
  79.     }  
  80.     //set attributes  
  81.     $(form).css('position','absolute');  
  82.     $(form).css('top','-1200px');  
  83.     $(form).css('left','-1200px');  
  84.     $(form).appendTo('body');  
  85.     return form;  
  86.   },//上传文件  
  87.   //s 参数：json对象  
  88.   ajaxFileUpload: function(s) {  
  89.     s = jQuery.extend({fileFilter:"",fileSize:0},jQuery.ajaxSettings,s);  
  90.     //文件筛选  
  91.     var fielName = $('#' + s.fileElementId).val();  
  92.     var extention = fielName.substring(fielName.lastIndexOf(".") + 1).toLowerCase();  
  93.     if (s.fileFilter && s.fileFilter.indexOf(extention) < 0) {  
  94.       alert("仅支持 (" + s.fileFilter + ") 为后缀名的文件!");  
  95.       return;  
  96.     }  
  97.     //文件大小限制  
  98.     if (s.fileSize > 0) {  
  99.       var fs = 0;  
  100.       try {  
  101.         if (window.ActiveXObject) {  
  102.           //IE浏览器  
  103.           var image = new Image();  
  104.           image.dynsrc = fielName;  
  105.           fs = image.fileSize;  
  106.         } else {  
  107.           fs = $('#' + s.fileElementId)[0].files[0].size;  
  108.         }  
  109.       } catch(e) {  
  110.       }  
  111.       if (fs > s.fileSize) {  
  112.         alert("当前文件大小 (" + fs + ") 超过允许的限制值 (" + s.fileSize +")！");  
  113.         return;  
  114.       }  
  115.     }  
  116.     var id = new Date().getTime();  
  117.     //创建 form 表单元素  
  118.     var form = jQuery.createUploadForm(id,s.fileElementId,s.data);  
  119.     //创建 iframe 贞元素  
  120.     var io = jQuery.createUploadIframe(id,s.secureuri);  
  121.     var frameId = 'jUploadFrame' + id;  
  122.     var formId = 'jUploadForm' + id;  
  123.     //监测是否有新的请求  
  124.     if (s.global && !jQuery.active++) {  
  125.       jQuery.event.trigger("ajaxStart"); //触发 AJAX 请求开始时执行函数。Ajax 事件。  
  126.     }  
  127.     var requestDone = false;  
  128.     //创建请求对象  
  129.     var xml = {};  
  130.     if (s.global)  
  131.       jQuery.event.trigger("ajaxSend",[xml,s]); //触发 AJAX 请求发送前事件  
  132.     //上载完成的回调函数  
  133.     var uploadCallback = function(isTimeout) {  
  134.       var io = document.getElementById(frameId);  
  135.       try {  
  136.         //存在跨域脚本访问问题，如遇到‘无法访问’提示则需要在响应流中加一段脚块：<script ...>document.domain = 'xxx.com';</script>  
  137.         if (io.contentWindow) { //兼容各个浏览器，可取得子窗口的 window 对象  
  138.           xml.responseText = io.contentWindow.document.body ? io.contentWindow.document.body.innerHTML : null;  
  139.           xml.responseXML = io.contentWindow.document.XMLDocument ? io.contentWindow.document.XMLDocument : io.contentWindow.document;  
  140.   
  141.   
  142.         } else if (io.contentDocument) { //contentDocument Firefox 支持，> ie8 的ie支持。可取得子窗口的 document 对象。  
  143.           xml.responseText = io.contentDocument.document.body ? io.contentDocument.document.body.innerHTML : null;  
  144.           xml.responseXML = io.contentDocument.document.XMLDocument ? io.contentDocument.document.XMLDocument : io.contentDocument.document;  
  145.         }  
  146.       } catch(e) {  
  147.         jQuery.handleErrorExt(s,xml,null,e);  
  148.       }  
  149.       if (xml || isTimeout == "timeout") {  
  150.         requestDone = true;  
  151.         var status;  
  152.         try {  
  153.           status = isTimeout != "timeout" ? "success" : "error";  
  154.           // Make sure that the request was successful or notmodified  
  155.           if (status != "error") {  
  156.             //处理数据（运行XML通过httpData不管回调）  
  157.             var data = jQuery.uploadHttpData(xml,s.dataType);  
  158.             // If a local callback was specified,fire it and pass it the data  
  159.             if (s.success)  
  160.               s.success(data,status);  
  161.   
  162.   
  163.             // Fire the global callback  
  164.             if (s.global)  
  165.               jQuery.event.trigger("ajaxSuccess",s]);  
  166.           } else  
  167.             jQuery.handleErrorExt(s,status);  
  168.         } catch(e) {  
  169.           status = "error";  
  170.           jQuery.handleErrorExt(s,status,e);  
  171.         }  
  172.   
  173.   
  174.         // The request was completed  
  175.         if (s.global)  
  176.           jQuery.event.trigger("ajaxComplete",s]);  
  177.   
  178.   
  179.         // Handle the global AJAX counter  
  180.         if (s.global && !--jQuery.active)  
  181.           jQuery.event.trigger("ajaxStop");  
  182.   
  183.   
  184.         // Process result  
  185.         if (s.complete)  
  186.           s.complete(xml,status);  
  187.   
  188.   
  189.         jQuery(io).unbind();  
  190.   
  191.   
  192.         setTimeout(function() {  
  193.           try {  
  194.             $(io).remove();  
  195.             $(form).remove();  
  196.           } catch(e) {  
  197.             jQuery.handleErrorExt(s,e);  
  198.           }  
  199.   
  200.   
  201.         },100);  
  202.   
  203.   
  204.         xml = null;  
  205.   
  206.   
  207.       }  
  208.     };  
  209.     //超时检查，s.timeout 毫秒后调用 uploadCallback 回调函数提示请求超时  
  210.     if (s.timeout > 0) {  
  211.       setTimeout(function() {  
  212.         // Check to see if the request is still happening  
  213.         if (!requestDone) uploadCallback("timeout");  
  214.       },s.timeout);  
  215.     }  
  216.     try {  
  217.       //设置动态 form 表单的提交参数  
  218.       // var io = $('#' + frameId);  
  219.       var form = $('#' + formId);  
  220.       $(form).attr('action',s.url);  
  221.       $(form).attr('method','POST');  
  222.       $(form).attr('target',frameId);  
  223.       if (form.encoding) {  
  224.         form.encoding = 'multipart/form-data';  
  225.       } else {  
  226.         form.enctype = 'multipart/form-data';  
  227.       }  
  228.       $(form).submit();  
  229.   
  230.   
  231.     } catch(e) {  
  232.       jQuery.handleErrorExt(s,e);  
  233.     }  
  234.     //向动态表单的页面加载事件中注册回调函数  
  235.     if (window.attachEvent) {  
  236.       document.getElementById(frameId).attachEvent('onload',uploadCallback);  
  237.     } else {  
  238.       document.getElementById(frameId).addEventListener('load',uploadCallback,false);  
  239.     }  
  240.     return {  
  241.       abort: function() {  
  242.       }  
  243.     };  
  244.   
  245.   
  246.   },//上传文件  
  247.   uploadHttpData: function(r,type) {  
  248.     //alert("type=" + type + ";uploadHttpData" + JSON.stringify(r))  
  249.     var data = !type;  
  250.     data = type == "xml" || data ? r.responseXML : r.responseText;  
  251.     // If the type is "script",eval it in global context  
  252.     if (type == "script")  
  253.       jQuery.globalEval(data);  
  254.     // Get the JavaScript object,if JSON is used.  
  255.     if (type == "json")  
  256.       eval("data = " + data);  
  257.     // evaluate scripts within html  
  258.     if (type == "html")  
  259.       jQuery("<div>").html(data).evalScripts();  
  260.     //alert($('param',data).each(function(){alert($(this).attr('value'));}));  
  261.     return data;  
  262.   },handleErrorExt: function(s,xhr,e) {  
  263.     // If a local callback was specified,fire it  
  264.     if (s.error) {  
  265.       s.error.call(s.context || s,e);  
  266.     }  
  267.   
  268.   
  269.     // Fire the global callback  
  270.     if (s.global) {  
  271.       (s.context ? jQuery(s.context) : jQuery.event).trigger("ajaxError",[xhr,s,e]);  
  272.     }  
  273.   }  
  274. });
本文转自： http://www.jb51.cc/article/p-sucqxphf-ua.html

猜你在找的Ajax相关文章

网页的异步请求（Ajax）
JS原生Ajax操作(XMLHttpRequest) GET请求 POST请求 兼容性问题 利用iframe模拟ajax 实现表...
手动实现AJAX
AJAX 每日更新前端基础，如果觉得不错，点个star吧 &#128515; https://github.com/Win...
axios异步提交表单数据的不同形式
踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使...
php的ajax简单实例
很早就听闻ajax的名声，但是却一直不知道怎么用，今天自己捣鼓了一下，竟然会用了，哈哈哈...
Json与Ajax(注册实例）
需要在服务器上进行哈 jquery的ajax方法： // jquery请求 $.ajax({ url: &quot;./serv...
jSon和Ajax登录功能，ajax数据交互案例
ajax实例，检测用户与注册 检测用户名是否被占用： 在用户填写完用户名之后，ajax会异步向...
关于AjaxControlToolkit的样式问题
网(LieHuo.Net)教程 技术文章一直都是转载的,从来没有自创过.终于遇到AjaxControlToolkit,...
一个简单的AJAX实现(HELLO AJAX)
客户端部分： <html> <head> <meta http-equiv="Content-Type" ...
AJAX中文乱码的两类问题及解决之策
1）发送路径中的参数有中文，在服务器段接收参数值是乱码 例如： var url=”a.jsp?na...
实例：AJAX返回xml代码如何在网页中显示
建站学院（LieHuo.Net）文档 今天来学习一篇实例代码教程：AJAX返回xml代码如何在网页中显...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作