伪Ajax上传，基于jQuery。

最新推荐文章于 2021-08-06 23:46:47 发布

最新推荐文章于 2021-08-06 23:46:47 发布 · 159 阅读

文章标签：

#jQuery #ViewUI

JavaScript 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何利用jQuery库中的ajax_upload方法实现HTML表单的Ajax文件上传功能，包括事件绑定、iframe隐藏页面以及响应处理。

用法：

$('form').ajax_upload(function(response){
  $('#target').replaceWith(response);
  //or $('#target').append(response);
  //.......
});

(function($){
  $.fn.ajax_upload = function(callback){
    if(this.attr('tagName') == 'FORM' && this.find('input[type=file]').size() > 0){
      this.attr('target', 'upload_frame')
      .submit(function(event){
        $('body').append("<iframe id='upload_frame' name='upload_frame' style='width:0px;height:0px;border:0px;display:none;' src='about:blank'></iframe>");
        $('body').append("<div id='frame_monitor' style='width:0px;height:0px;border:0px;display:none;'><script type='text/javascript'>"+
        "var _id = setInterval(function(){"+
          "var response = $('#upload_frame').contents().find('body').html();"+
          "if(response != ''){"+
            "clearInterval(_id);"+
            "("+callback+")(response);"+
            "$('#upload_frame').remove();"+
            "$('#frame_monitor').remove();"+
          "}"+
        "},300)"+
        "</script></div>");
      });
    }
  };
})(jQuery);