index.html

  1. <head runat="server">
  2.     <title></title>
  3.     <script src="jquery.min.js" type="text/javascript"></script>
  4.     <script src="ajaxfileupload.js" type="text/javascript"></script>
  5.     <!-- <script src="jquery.Jcrop.js" type="text/javascript"></script> -->    
  6.  
  7. </head>
  8. <body>
  9.     <form id="form1" runat="server">
  10.         <h1 id='h1'>upload</h1>
  11.         <input id="fileToUpload" type="file" size="45" name="fileToUpload" class="input">
  12.  
  13.         <button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">
  14.             Upload
  15.         </button>
  16.  
  17.     </form>
  18.     <script type="text/javascript">
  19.         function ajaxFileUpload() {
  20.  
  21.             $.ajaxFileUpload({
  22.  
  23.                 url : 'http://crowd.ttsharing.com/test',
  24.                 secureuri : false,
  25.                 fileElementId : 'fileToUpload',
  26.                 dataType : 'html',
  27.                 beforeSend : function() {
  28.                     $("#h1").html('before');
  29.                 },
  30.                 complete : function() {
  31.                     $("#h1").html('complete');
  32.                 },
  33.                 success : function(data, status) {
  34.  
  35.                     if ( typeof (data.error) != 'undefined') {
  36.                         if (data.error != '') {
  37.                             alert(data.error);
  38.                         } else {
  39.                             alert(data.msg);
  40.                         }
  41.                     }
  42.                 },
  43.                 error : function(data, status, e) {
  44.                     alert(e);
  45.                 }
  46.             });
  47.             return false;
  48.         }
  49.  
  50.     </script>
  51. </body>

ajaxFileUpload.js

  1. jQuery.extend({
  2.  
  3.     createUploadIframe: function(id, uri)
  4.     {
  5.             //create frame
  6.             var frameId = 'jUploadFrame' + id;
  7.             var iframeHtml = '<iframe id="' + frameId + '" name="' + frameId + '" style="position:absolute; top:-9999px; left:-9999px"';
  8.             if(window.ActiveXObject)
  9.             {
  10.                 if(typeof uri== 'boolean'){
  11.                     iframeHtml += ' src="' + 'javascript:false' + '"';
  12.  
  13.                 }
  14.                 else if(typeof uri== 'string'){
  15.                     iframeHtml += ' src="' + uri + '"';
  16.  
  17.                 }
  18.             }
  19.             iframeHtml += ' />';
  20.             jQuery(iframeHtml).appendTo(document.body);
  21.  
  22.             return jQuery('#' + frameId).get(0);
  23.     },
  24.     createUploadForm: function(id, fileElementId)
  25.     {
  26.         //create form
  27.         var formId = 'jUploadForm' + id;
  28.         var fileId = 'jUploadFile' + id;
  29.         var form = jQuery('<form  action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');
  30.         var oldElement = jQuery('#' + fileElementId);
  31.         var newElement = jQuery(oldElement).clone();
  32.         jQuery(oldElement).attr('id', fileId);
  33.         jQuery(oldElement).before(newElement);
  34.         jQuery(oldElement).appendTo(form);
  35.         //set attributes
  36.         jQuery(form).css('position', 'absolute');
  37.         jQuery(form).css('top', '-1200px');
  38.         jQuery(form).css('left', '-1200px');
  39.         jQuery(form).appendTo('body');
  40.         return form;
  41.     },
  42.  
  43.     ajaxFileUpload: function(s) {
  44.         // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout
  45.         s = jQuery.extend({}, jQuery.ajaxSettings, s);
  46.         var id = new Date().getTime()
  47.         var form = jQuery.createUploadForm(id, s.fileElementId);
  48.         var io = jQuery.createUploadIframe(id, s.secureuri);
  49.         var frameId = 'jUploadFrame' + id;
  50.         var formId = 'jUploadForm' + id;
  51.         // Watch for a new set of requests
  52.         if ( s.global && ! jQuery.active++ )
  53.         {
  54.             jQuery.event.trigger( "ajaxStart" );
  55.         }
  56.         var requestDone = false;
  57.         // Create the request object
  58.         var xml = {}
  59.         if ( s.global )
  60.             jQuery.event.trigger("ajaxSend", [xml, s]);
  61.         // Wait for a response to come back
  62.         var uploadCallback = function(isTimeout)
  63.         {
  64.             var io = document.getElementById(frameId);
  65.             try
  66.             {
  67.                 if(io.contentWindow)
  68.                 {
  69.                      xml.responseText = io.contentWindow.document.body?io.contentWindow.document.body.innerHTML:null;
  70.                      xml.responseXML = io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document;
  71.  
  72.                 }else if(io.contentDocument)
  73.                 {
  74.                      xml.responseText = io.contentDocument.document.body?io.contentDocument.document.body.innerHTML:null;
  75.                     xml.responseXML = io.contentDocument.document.XMLDocument?io.contentDocument.document.XMLDocument:io.contentDocument.document;
  76.                 }
  77.             }catch(e)
  78.             {
  79.                 jQuery.handleError(s, xml, null, e);
  80.             }
  81.             if ( xml || isTimeout == "timeout")
  82.             {
  83.                 requestDone = true;
  84.                 var status;
  85.                 try {
  86.                     status = isTimeout != "timeout" ? "success" : "error";
  87.                     // Make sure that the request was successful or notmodified
  88.                     if ( status != "error" )
  89.                     {
  90.                         // process the data (runs the xml through httpData regardless of callback)
  91.                         var data = jQuery.uploadHttpData( xml, s.dataType );
  92.                         // If a local callback was specified, fire it and pass it the data
  93.                         if ( s.success )
  94.                             s.success( data, status );
  95.  
  96.                         // Fire the global callback
  97.                         if( s.global )
  98.                             jQuery.event.trigger( "ajaxSuccess", [xml, s] );
  99.                     } else
  100.                         jQuery.handleError(s, xml, status);
  101.                 } catch(e)
  102.                 {
  103.                     status = "error";
  104.                     jQuery.handleError(s, xml, status, e);
  105.                 }
  106.  
  107.                 // The request was completed
  108.                 if( s.global )
  109.                     jQuery.event.trigger( "ajaxComplete", [xml, s] );
  110.  
  111.                 // Handle the global AJAX counter
  112.                 if ( s.global && ! --jQuery.active )
  113.                     jQuery.event.trigger( "ajaxStop" );
  114.  
  115.                 // Process result
  116.                 if ( s.complete )
  117.                     s.complete(xml, status);
  118.  
  119.                 jQuery(io).unbind()
  120.  
  121.                 setTimeout(function()
  122.                                     {    try
  123.                                         {
  124.                                             jQuery(io).remove();
  125.                                             jQuery(form).remove();    
  126.  
  127.                                         } catch(e)
  128.                                         {
  129.                                             jQuery.handleError(s, xml, null, e);
  130.                                         }                                    
  131.  
  132.                                     }, 100)
  133.  
  134.                 xml = null
  135.  
  136.             }
  137.         }
  138.         // Timeout checker
  139.         if ( s.timeout > 0 )
  140.         {
  141.             setTimeout(function(){
  142.                 // Check to see if the request is still happening
  143.                 if( !requestDone ) uploadCallback( "timeout" );
  144.             }, s.timeout);
  145.         }
  146.         try
  147.         {
  148.  
  149.             var form = jQuery('#' + formId);
  150.             jQuery(form).attr('action', s.url);
  151.             jQuery(form).attr('method', 'POST');
  152.             jQuery(form).attr('target', frameId);
  153.             if(form.encoding)
  154.             {
  155.                 jQuery(form).attr('encoding', 'multipart/form-data');
  156.             }
  157.             else
  158.             {
  159.                 jQuery(form).attr('enctype', 'multipart/form-data');
  160.             }
  161.             jQuery(form).submit();
  162.  
  163.         } catch(e)
  164.         {
  165.             jQuery.handleError(s, xml, null, e);
  166.         }
  167.  
  168.         jQuery('#' + frameId).load(uploadCallback    );
  169.         return {abort: function () {}};    
  170.  
  171.     },
  172.  
  173.     uploadHttpData: function( r, type ) {
  174.         var data = !type;
  175.         data = type == "xml" || data ? r.responseXML : r.responseText;
  176.         // If the type is "script", eval it in global context
  177.         if ( type == "script" )
  178.             jQuery.globalEval( data );
  179.         // Get the JavaScript object, if JSON is used.
  180.         if ( type == "json" )
  181.             eval( "data = " + data );
  182.         // evaluate scripts within html
  183.         if ( type == "html" )
  184.             jQuery("<div>").html(data).evalScripts();
  185.  
  186.         return data;
  187.     }
  188. })

使用ajaxFileUpload实现异步上传图片的更多相关文章

  1. ajaxfileupload.js异步上传

    转载:https://www.cnblogs.com/labimeilexin/p/6742647.html jQuery插件之ajaxFileUpload     ajaxFileUpload.js ...

  2. 利用ajaxfileupload.js异步上传文件

    1.引入ajaxfileupload.js 2.html代码 <input type="file" id="enclosure" name="e ...

  3. js 原生 ajax 异步上传图片

    <script type="text/javascript"> function upload() { var file1 = document.getElementB ...

  4. Jquery实现异步上传图片

    利用jQuery的ajax函数就可以实现异步上传图片了.一开始我是想在处理程序中,直接用context.Request.Files来获取页面中的input file,但是不知道为什么一次获取不了.网上 ...

  5. 异步上传图片，光用jquery不行，得用jquery.form.js插件

    异步上传图片,光用jquery不行,得用jquery.form.js插件,百度一下下载这个插件,加jquery,引入就可以了 <form id="postbackground" ...

  6. [Ajax] 使用Ajax异步上传图片文件(非Form表单提交)

    通过表单Form提交来上传文件的方式这里就不说了: 下面介绍,通过js中使用ajax异步上传图片文件: 新建一个html页面和一个一般处理程序即可: 涉及思路: //发送2次Ajax请求完成js异步上 ...

  7. 利用KindEditor的uploadbutton实现异步上传图片

    利用KindEditor的uploadbutton实现异步上传图片 异步上传图片最经常使用的方法就是图片在iframe中上传.这样仅仅须要刷新iframe.而不用刷新整个页面.     KindEdi ...

  8. php结合jquery异步上传图片（ajaxSubmit）

    php结合jquery异步上传图片(ajaxSubmit),以下为提交页面代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi ...

  9. C# 异步上传图片案例

    好久没写博客了,都感觉自己快堕落了!今天随性写一篇关于异步上传图片的程序及插件! 说是程序及插件,其实程序占大头,所谓的插件只是两个JS.分别为:jquery.html5upload.js 和 jqu ...

随机推荐

  1. 23、从头学Android之ContentProvider .

    http://blog.csdn.net/jiahui524/article/details/7016430 应用场景: 在Android官方指出的Android的数据存储方式总共有五种,分别是:Sh ...

  2. UITableView优化那点事

    forkingdog关于UITableView优化的框架其实已经能够应用在一般的场景,且有蛮多的知识点供我们借鉴,借此站在巨人的肩膀上来分析一把. 至于UITableView的瓶颈在哪里,我相信网上随 ...

  3. Google前工程经理王忻：如何准备软件工程师的面试

    http://t.jobdu.com/thread-368-1-1.html 导读:原文作者王忻,Google前工程经理,2003年月加入Google,是Google Lively背后的主导力量,是G ...

  4. AppScan在项目中的使用流程

    AppScan在项目中的使用流程 http://www.docin.com/p-829022229.html

  5. SQL Server 内存管理

    windows memory:  Memory: Cache Bytes 是系统的working set, 也就是系统使用的物理内存数目. 可以观察Windows用了多少物理内存. 1. System ...

  6. 关于文件的复制(用InputStream和OutputStream)

    作业:将c盘的一个文本文件复制到d盘. 分析:复制原理:读取c盘文件中的数据,将这些数据写入到d盘当中,连读带写. /* * 需求:作业:将c盘的一个文本文件复制到d盘. * 思路: * 1,需要读取 ...

  7. volley+NetworkImageView实现列表界面的列表项中的左侧图标展现之【实现已经加载的列表项的图标上翻的时候不重新加载】

    参考资料:http://blog.csdn.net/guolin_blog/article/details/17482165 我使用的列表的适配器是继承ArrayAdapter的,所以关于使用voll ...

  8. my_vimrc

    " ----------------- Author: Ruchee" ----------------- Email: my@ruchee.com" --------- ...

  9. 1.1、Mybatis一级缓存测试

    package me.gacl.test; import me.gacl.domain.User; import me.gacl.util.MyBatisUtil; import org.apache ...

  10. 阿里云 mysql 无缘无故挂掉

    近期在登录自己博客时,老是报数据库连接失败,然后重启服务器就好了.但是,重启服务器很耗时间,不方便,不能每次都重启吧于是远程连接服务器看了一下原来是数据库服务挂掉了启动时还报错于是查看了下错误日志 2 ...