首页 > 代码库 > 异步无刷新上传文件而且上传文件能够带上參数

异步无刷新上传文件而且上传文件能够带上參数

关于异步上传文件而且带上參数,网上有非常多关于这种插件。而我最喜欢用的插件是ajaxfileupload.js。该插件的代码例如以下:

 

/*
  131108-xxj-ajaxFileUpload.js 无刷新上传图片 jquery 插件。支持 ie6-ie10 
  依赖:jquery-1.6.1.min.js
  主方法:ajaxFileUpload 接受 json 对象參数
  參数说明:
  fileElementId:必选,上传文件域ID
  url:必选,发送请求的URL字符串
  fileFilter:可选,限定上传文件的格式(.jpg,.bmp,.gif,.png)
  fileSize:可选,0 为无限制(IE浏览器不兼容)
  data:可选,将和文件域一同post的參数(json对象)
  其他:$.ajax 的參数均为可选參数
  注:如遇到‘无法訪问’的脚本错误提示则须要在响应流中加一段脚块一同输出:<script ...>document.domain = 'xxx.com';</script>
*/
jQuery.extend({
  //创建 iframe 元素,接受提交及响应
  createUploadIframe: function(id, uri) {
    //create frame
    var frameId = 'jUploadFrame' + id;


    if (window.ActiveXObject) {
      //fix ie9 and ie 10-------------
      if (jQuery.browser.version == "9.0" || jQuery.browser.version == "10.0") {
        var io = document.createElement('iframe');
        io.id = frameId;
        io.name = frameId;
      } else if (jQuery.browser.version == "6.0" || jQuery.browser.version == "7.0" || jQuery.browser.version == "8.0") {
        var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />');
        if (typeof uri == 'boolean') {
          io.src = 'javascript:false';
        } else if (typeof uri == 'string') {
          io.src = uri;
        }
      }
    } else {
      var io = document.createElement('iframe');
      io.id = frameId;
      io.name = frameId;
    }
    io.style.position = 'absolute';
    io.style.top = '-1000px';
    io.style.left = '-1000px';


    document.body.appendChild(io);


    return io;
  },
  //创建 from 元素。用于提交的表单
  createUploadForm: function(id, fileElementId, postData) {
    //create form<span style="white-space:pre">	</span>
    var formId = 'jUploadForm' + id;
    var fileId = 'jUploadFile' + id;
    var form = $('<form  action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');
    var oldElement = $('#' + fileElementId);
    var newElement = $(oldElement).clone();


    $(oldElement).attr('id', fileId);
    $(oldElement).before(newElement);
    $(oldElement).appendTo(form);
    //加入自己定义參数
    if (postData) {
      //递归遍历JSON全部键值


      function recurJson(json) {
        for (var i in json) {
          //alert(i+"="+json[i])
          $("<input name='" + i + "' id='" + i + "' value='" + json[i] + "' />").appendTo(form);
          if (typeof json[i] == "object") {
            recurJson(json[i]);
          }
        }
      }


      recurJson(postData);
    }
    //set attributes
    $(form).css('position', 'absolute');
    $(form).css('top', '-1200px');
    $(form).css('left', '-1200px');
    $(form).appendTo('body');
    return form;
  },
  //上传文件
  //s 參数:json对象
  ajaxFileUpload: function(s) {
    s = jQuery.extend({fileFilter:"",fileSize:0}, jQuery.ajaxSettings, s);
    //文件筛选
    var fielName = $('#' + s.fileElementId).val();
    var extention = fielName.substring(fielName.lastIndexOf(".") + 1).toLowerCase();
    if (s.fileFilter && s.fileFilter.indexOf(extention) < 0) {
      alert("仅支持 (" + s.fileFilter + ") 为后缀名的文件!");
      return;
    }
    //文件限制大小
    if (s.fileSize > 0) {
      var fs = 0;
      try {
        if (window.ActiveXObject) {
          //IE浏览器
          var image = new Image();
          image.dynsrc = fielName;
          fs = image.fileSize;
        } else {
          fs = $('#' + s.fileElementId)[0].files[0].size;
        }
      } catch(e) {
      }
      if (fs > s.fileSize) {
        alert("当前文件大小 (" + fs + ") 超过同意的限制值 (" + s.fileSize +")!

");         return;       }     }     var id = new Date().getTime();     //创建 form 表单元素     var form = jQuery.createUploadForm(id, s.fileElementId, s.data);     //创建 iframe 贞元素     var io = jQuery.createUploadIframe(id, s.secureuri);     var frameId = 'jUploadFrame' + id;     var formId = 'jUploadForm' + id;     //监測是否有新的请求     if (s.global && !jQuery.active++) {       jQuery.event.trigger("ajaxStart"); //触发 AJAX 请求開始时执行函数。

Ajax 事件。

    }     var requestDone = false;     //创建请求对象     var xml = {};     if (s.global)       jQuery.event.trigger("ajaxSend", [xml, s]); //触发 AJAX 请求发送前事件     //上载完毕的回调函数     var uploadCallback = function(isTimeout) {       var io = document.getElementById(frameId);       try {         //存在跨域脚本訪问问题。如遇到‘无法訪问’提示则须要在响应流中加一段脚块:<script ...>document.domain = 'xxx.com';</script>         if (io.contentWindow) { //兼容各个浏览器。可取得子窗体的 window 对象           xml.responseText = io.contentWindow.document.body ? io.contentWindow.document.body.innerHTML : null;           xml.responseXML = io.contentWindow.document.XMLDocument ?

io.contentWindow.document.XMLDocument : io.contentWindow.document;         } else if (io.contentDocument) { //contentDocument Firefox 支持,> ie8 的ie支持。

可取得子窗体的 document 对象。           xml.responseText = io.contentDocument.document.body ? io.contentDocument.document.body.innerHTML : null;           xml.responseXML = io.contentDocument.document.XMLDocument ? io.contentDocument.document.XMLDocument : io.contentDocument.document;         }       } catch(e) {         jQuery.handleErrorExt(s, xml, null, e);       }       if (xml || isTimeout == "timeout") {         requestDone = true;         var status;         try {           status = isTimeout != "timeout" ?

"success" : "error";           // Make sure that the request was successful or notmodified           if (status != "error") {             //处理数据(执行XML通过httpData无论回调)             var data = jQuery.uploadHttpData(xml, s.dataType);             // If a local callback was specified, fire it and pass it the data             if (s.success)               s.success(data, status);             // Fire the global callback             if (s.global)               jQuery.event.trigger("ajaxSuccess", [xml, s]);           } else             jQuery.handleErrorExt(s, xml, status);         } catch(e) {           status = "error";           jQuery.handleErrorExt(s, xml, status, e);         }         // The request was completed         if (s.global)           jQuery.event.trigger("ajaxComplete", [xml, s]);         // Handle the global AJAX counter         if (s.global && !--jQuery.active)           jQuery.event.trigger("ajaxStop");         // Process result         if (s.complete)           s.complete(xml, status);         jQuery(io).unbind();         setTimeout(function() {           try {             $(io).remove();             $(form).remove();           } catch(e) {             jQuery.handleErrorExt(s, xml, null, e);           }         }, 100);         xml = null;       }     };     //超时检查。s.timeout 毫秒后调用 uploadCallback 回调函数提示请求超时     if (s.timeout > 0) {       setTimeout(function() {         // Check to see if the request is still happening         if (!requestDone) uploadCallback("timeout");       }, s.timeout);     }     try {       //设置动态 form 表单的提交參数       // var io = $('#' + frameId);       var form = $('#' + formId);       $(form).attr('action', s.url);       $(form).attr('method', 'POST');       $(form).attr('target', frameId);       if (form.encoding) {         form.encoding = 'multipart/form-data';       } else {         form.enctype = 'multipart/form-data';       }       $(form).submit();     } catch(e) {       jQuery.handleErrorExt(s, xml, null, e);     }     //向动态表单的页面载入事件中注冊回调函数     if (window.attachEvent) {       document.getElementById(frameId).attachEvent('onload', uploadCallback);     } else {       document.getElementById(frameId).addEventListener('load', uploadCallback, false);     }     return {       abort: function() {       }     };   },   //上传文件   uploadHttpData: function(r, type) {     //alert("type=" + type + ";uploadHttpData" + JSON.stringify(r))     var data = !type;     data = type == "xml" || data ?

r.responseXML : r.responseText;     // If the type is "script", eval it in global context     if (type == "script")       jQuery.globalEval(data);     // Get the JavaScript object, if JSON is used.     if (type == "json")       eval("data = http://www.mamicode.com/" + data);>以上插件须要jquery支持

还须要下面代码

		 		  $.ajaxFileUpload ({ 
			 			url :url, 
			 			secureuri:false, 
			 			fileElementId:img, 
			 			dataType:'text', 
			 			data:{imge:im},
			 			success : function (data, status){	
			 				if(data!=""){
			 				  imsrc.attr('src',data);
			 				  hide.val(data);
			 				}
			 			}
			 		});

    url 是服务端的地址

     fileElementId 是文件域的id 为了上传成功 文件域的name 与id要一致

    dateType 是上传文件的信息发送到服务端的格式,text是文本 

     data 是发送文件能够带上參数,是可选的。

异步无刷新上传文件而且上传文件能够带上參数