关于用ajaxfileupload时,遇到一个要刷新一次页面才能再次上传,

ajaxFileUpload 用onchang上传只能上传一次 第二次就失效了 我找这个问题找了很长时间

  1. ajaxFileUpload = (fileElementId) => {
  2. var jq: any = $;
  3. var that = this;
  4. var d: any = $(this);
  5. d.jqLoading();
  6. jq.ajaxFileUpload
  7. (
  8. {
  9. url: BatchInvoiceUrls.UploadExcelUrl, //用于文件上传的服务器端请求地址
  10. secureuri: false, //是否需要安全协议,一般设置为false
  11. fileElementId: fileElementId, //文件上传域的ID
  12. dataType: 'text', //返回值类型 一般设置为json
  13. type: "post",
  14. //contentType: 'text/html;charset=UTF-8',
  15. //ContentType:'text/html;charset=UTF-8',
  16. success: function (data, status) //服务器成功响应处理函数
  17. {
  18. //这里是成功处理
  19. $.fn.jqLoading("destroy");
  20.  
  21. },
  22. error: function (data, status, e)//服务器响应失败处理函数
  23. {
  24. alert(e);
  25. }
  26. }
  27. )
  28. $("#fileExcel").replaceWith('<input class="file" type="file" id="fileExcel" name="fileExcel" accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" onchange="module.ajaxFileUpload(\'' + fileElementId+'\')" />');
  29. return false;
  30. }
  1. onchange需要重新绑定
  2.  
  3. ajaxfileupload.js代码:
  1. jQuery.extend({
  2. handleError: function (s, xhr, status, e) {
  3. // If a local callback was specified, fire it
  4. if (s.error) {
  5. s.error.call(s.context || s, xhr, status, e);
  6. }
  7.  
  8. // Fire the global callback
  9. if (s.global) {
  10. (s.context ? jQuery(s.context) : jQuery.event).trigger("ajaxError", [xhr, s, e]);
  11. }
  12. },
  13. createUploadIframe: function (id, uri) {
  14.  
  15. var frameId = 'jUploadFrame' + id;
  16.  
  17. if (window.ActiveXObject) {
  18. if (jQuery.browser.version == "9.0" || jQuery.browser.version == "10.0" || jQuery.browser.version == "11.0") {
  19. io = document.createElement('iframe');
  20. io.id = frameId;
  21. io.name = frameId;
  22. }
  23. else if (jQuery.browser.version == "6.0" || jQuery.browser.version == "7.0" || jQuery.browser.version == "8.0") {
  24.  
  25. var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />');
  26. if (typeof uri == 'boolean') {
  27. io.src = 'javascript:false';
  28. }
  29. else if (typeof uri == 'string') {
  30. io.src = uri;
  31. }
  32. }
  33. }
  34. else {
  35. var io = document.createElement('iframe');
  36. io.id = frameId;
  37. io.name = frameId;
  38. }
  39. io.style.position = 'absolute';
  40. io.style.top = '-1000px';
  41. io.style.left = '-1000px';
  42.  
  43. document.body.appendChild(io);
  44.  
  45. return io;
  46. },
  47. ajaxUpload: function (s, xml) {
  48. //if((fromFiles.nodeType&&!((fileList=fromFiles.files)&&fileList[0].name)))
  49.  
  50. var uid = new Date().getTime(), idIO = 'jUploadFrame' + uid, _this = this;
  51. var jIO = $('<iframe name="' + idIO + '" id="' + idIO + '" style="display:none">').appendTo('body');
  52. var jForm = $('<form action="' + s.url + '" target="' + idIO + '" method="post" enctype="multipart/form-data"></form>').appendTo('body');
  53. var oldElement = $('#' + s.fileElementId);
  54. var newElement = $(oldElement).clone();
  55. $(oldElement).attr('id', 'jUploadFile' + uid);
  56. $(oldElement).before(newElement);
  57. $(oldElement).appendTo(jForm);
  58.  
  59. this.remove = function () {
  60. if (_this !== null) {
  61. jNewFile.before(jOldFile).remove();
  62. jIO.remove(); jForm.remove();
  63. _this = null;
  64. }
  65. }
  66. this.onLoad = function () {
  67.  
  68. var data = $(jIO[0].contentWindow.document.body).text();
  69.  
  70. try {
  71.  
  72. if (data != undefined) {
  73. data = eval('(' + data + ')');
  74. try {
  75.  
  76. if (s.success)
  77. s.success(data, status);
  78.  
  79. // Fire the global callback
  80. if (s.global)
  81. jQuery.event.trigger("ajaxSuccess", [xml, s]);
  82. if (s.complete)
  83. s.complete(data, status);
  84. xml = null;
  85. } catch (e) {
  86.  
  87. status = "error";
  88. jQuery.handleError(s, xml, status, e);
  89. }
  90.  
  91. // The request was completed
  92. if (s.global)
  93. jQuery.event.trigger("ajaxComplete", [xml, s]);
  94. // Handle the global AJAX counter
  95. if (s.global && ! --jQuery.active)
  96. jQuery.event.trigger("ajaxStop");
  97.  
  98. // Process result
  99.  
  100. }
  101. } catch (ex) {
  102. alert(ex.message);
  103. };
  104. }
  105. this.start = function () { jForm.submit(); jIO.load(_this.onLoad); };
  106. return this;
  107.  
  108. },
  109. createUploadForm: function (id, url, fileElementId, data) {
  110. //create form
  111. var formId = 'jUploadForm' + id;
  112. var fileId = 'jUploadFile' + id;
  113. var form = jQuery('<form action="' + url + '" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');
  114. if (data) {
  115. for (var i in data) {
  116. jQuery('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form);
  117. }
  118. }
  119.  
  120. var oldElement = jQuery('#' + fileElementId);
  121. var newElement = jQuery(oldElement).clone();
  122. jQuery(oldElement).attr('id', fileId);
  123. jQuery(oldElement).before(newElement);
  124. jQuery(oldElement).appendTo(form);
  125.  
  126. //set attributes
  127. jQuery(form).css('position', 'absolute');
  128. jQuery(form).css('top', '-1200px');
  129. jQuery(form).css('left', '-1200px');
  130. jQuery(form).appendTo('body');
  131. return form;
  132. },
  133. ajaxFileUpload: function (s) {
  134. // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout
  135. // Create the request object
  136. var xml = {};
  137. s = jQuery.extend({}, jQuery.ajaxSettings, s);
  138. if (window.ActiveXObject) {
  139. var upload = new jQuery.ajaxUpload(s, xml);
  140. upload.start();
  141.  
  142. } else {
  143. var id = new Date().getTime();
  144. var form = jQuery.createUploadForm(id, s.url, s.fileElementId, (typeof (s.data) == 'undefined' ? false : s.data));
  145. var io = jQuery.createUploadIframe(id, s.secureuri);
  146. var frameId = 'jUploadFrame' + id;
  147. var formId = 'jUploadForm' + id;
  148. // Watch for a new set of requests
  149. if (s.global && !jQuery.active++) {
  150. jQuery.event.trigger("ajaxStart");
  151. }
  152. var requestDone = false;
  153.  
  154. if (s.global)
  155. jQuery.event.trigger("ajaxSend", [xml, s]);
  156. // Wait for a response to come back
  157. var uploadCallback = function (isTimeout) {
  158. var io = document.getElementById(frameId);
  159.  
  160. try {
  161. if (io.contentWindow) {
  162. xml.responseText = io.contentWindow.document.body ? io.contentWindow.document.body.innerHTML : null;
  163. xml.responseXML = io.contentWindow.document.XMLDocument ? io.contentWindow.document.XMLDocument : io.contentWindow.document;
  164.  
  165. } else if (io.contentDocument) {
  166. xml.responseText = io.contentDocument.document.body ? io.contentDocument.document.body.innerHTML : null;
  167. xml.responseXML = io.contentDocument.document.XMLDocument ? io.contentDocument.document.XMLDocument : io.contentDocument.document;
  168. }
  169. } catch (e) {
  170. jQuery.handleError(s, xml, null, e);
  171. }
  172. if (xml || isTimeout == "timeout") {
  173. requestDone = true;
  174. var status;
  175. try {
  176. status = isTimeout != "timeout" ? "success" : "error";
  177. // Make sure that the request was successful or notmodified
  178. if (status != "error") {
  179. // process the data (runs the xml through httpData regardless of callback)
  180. var data = jQuery.uploadHttpData(xml, s.dataType);
  181. // If a local callback was specified, fire it and pass it the data
  182.  
  183. if (s.success)
  184. s.success(data, status);
  185.  
  186. // Fire the global callback
  187. if (s.global)
  188. jQuery.event.trigger("ajaxSuccess", [xml, s]);
  189. if (s.complete)
  190. s.complete(data, status);
  191.  
  192. } else
  193. jQuery.handleError(s, xml, status);
  194. } catch (e) {
  195. status = "error";
  196. jQuery.handleError(s, xml, status, e);
  197. }
  198.  
  199. // The request was completed
  200. if (s.global)
  201. jQuery.event.trigger("ajaxComplete", [xml, s]);
  202. // Handle the global AJAX counter
  203. if (s.global && ! --jQuery.active)
  204. jQuery.event.trigger("ajaxStop");
  205.  
  206. // Process result
  207. jQuery(io).unbind();
  208.  
  209. setTimeout(function () {
  210. try {
  211. jQuery(io).remove();
  212. jQuery(form).remove();
  213.  
  214. } catch (e) {
  215. jQuery.handleError(s, xml, null, e);
  216. }
  217.  
  218. }, 100);
  219.  
  220. xml = null;
  221.  
  222. }
  223. };
  224. // Timeout checker
  225. if (s.timeout > 0) {
  226. setTimeout(function () {
  227. // Check to see if the request is still happening
  228. if (!requestDone) uploadCallback("timeout");
  229. }, s.timeout);
  230. }
  231.  
  232. try {
  233.  
  234. var form = jQuery('#' + formId);
  235. jQuery(form).attr('action', s.url);
  236. jQuery(form).attr('method', 'POST');
  237. jQuery(form).attr('target', frameId);
  238.  
  239. if (form.encoding) {
  240. jQuery(form).attr('encoding', 'multipart/form-data');
  241. }
  242. else {
  243. jQuery(form).attr('enctype', 'multipart/form-data');
  244. }
  245.  
  246. jQuery(form).submit();
  247.  
  248. } catch (e) {
  249. jQuery.handleError(s, xml, null, e);
  250. }
  251.  
  252. jQuery('#' + frameId).load(uploadCallback);
  253. return { abort: function () { } };
  254.  
  255. }
  256. },
  257.  
  258. uploadHttpData: function (r, type) {
  259.  
  260. var data = !type;
  261. data = type == "xml" || data ? r.responseXML : r.responseText;
  262. // If the type is "script", eval it in global context
  263. if (type == "script")
  264. jQuery.globalEval(data);
  265. // Get the JavaScript object, if JSON is used.
  266. if (type == "json") {
  267.  
  268. eval("data = " + $(data).html());
  269. }
  270. // evaluate scripts within html
  271. if (type == "html")
  272. jQuery("<div>").html(data).evalScripts();
  273.  
  274. return data;
  275. }
  276. });
  277. (function (jQuery) {
  278.  
  279. if (jQuery.browser) return;
  280.  
  281. jQuery.browser = {};
  282. jQuery.browser.mozilla = false;
  283. jQuery.browser.webkit = false;
  284. jQuery.browser.opera = false;
  285. jQuery.browser.msie = false;
  286.  
  287. var nAgt = navigator.userAgent;
  288. jQuery.browser.name = navigator.appName;
  289. jQuery.browser.fullVersion = '' + parseFloat(navigator.appVersion);
  290. jQuery.browser.majorVersion = parseInt(navigator.appVersion, 10);
  291. var nameOffset, verOffset, ix;
  292.  
  293. // In Opera, the true version is after "Opera" or after "Version"
  294. if ((verOffset = nAgt.indexOf("Opera")) != -1) {
  295. jQuery.browser.opera = true;
  296. jQuery.browser.name = "Opera";
  297. jQuery.browser.fullVersion = nAgt.substring(verOffset + 6);
  298. if ((verOffset = nAgt.indexOf("Version")) != -1)
  299. jQuery.browser.fullVersion = nAgt.substring(verOffset + 8);
  300. }
  301. // In MSIE, the true version is after "MSIE" in userAgent
  302. else if ((verOffset = nAgt.indexOf("MSIE")) != -1) {
  303. jQuery.browser.msie = true;
  304. jQuery.browser.name = "Microsoft Internet Explorer";
  305. jQuery.browser.fullVersion = nAgt.substring(verOffset + 5);
  306. }
  307. // In Chrome, the true version is after "Chrome"
  308. else if ((verOffset = nAgt.indexOf("Chrome")) != -1) {
  309. jQuery.browser.webkit = true;
  310. jQuery.browser.name = "Chrome";
  311. jQuery.browser.fullVersion = nAgt.substring(verOffset + 7);
  312. }
  313. // In Safari, the true version is after "Safari" or after "Version"
  314. else if ((verOffset = nAgt.indexOf("Safari")) != -1) {
  315. jQuery.browser.webkit = true;
  316. jQuery.browser.name = "Safari";
  317. jQuery.browser.fullVersion = nAgt.substring(verOffset + 7);
  318. if ((verOffset = nAgt.indexOf("Version")) != -1)
  319. jQuery.browser.fullVersion = nAgt.substring(verOffset + 8);
  320. }
  321. // In Firefox, the true version is after "Firefox"
  322. else if ((verOffset = nAgt.indexOf("Firefox")) != -1) {
  323. jQuery.browser.mozilla = true;
  324. jQuery.browser.name = "Firefox";
  325. jQuery.browser.fullVersion = nAgt.substring(verOffset + 8);
  326. }
  327. // In most other browsers, "name/version" is at the end of userAgent
  328. else if ((nameOffset = nAgt.lastIndexOf(' ') + 1) <
  329. (verOffset = nAgt.lastIndexOf('/'))) {
  330. jQuery.browser.name = nAgt.substring(nameOffset, verOffset);
  331. jQuery.browser.fullVersion = nAgt.substring(verOffset + 1);
  332. if (jQuery.browser.name.toLowerCase() == jQuery.browser.name.toUpperCase()) {
  333. jQuery.browser.name = navigator.appName;
  334. }
  335. }
  336. // trim the fullVersion string at semicolon/space if present
  337. if ((ix = jQuery.browser.fullVersion.indexOf(";")) != -1)
  338. jQuery.browser.fullVersion = jQuery.browser.fullVersion.substring(0, ix);
  339. if ((ix = jQuery.browser.fullVersion.indexOf(" ")) != -1)
  340. jQuery.browser.fullVersion = jQuery.browser.fullVersion.substring(0, ix);
  341.  
  342. jQuery.browser.majorVersion = parseInt('' + jQuery.browser.fullVersion, 10);
  343. if (isNaN(jQuery.browser.majorVersion)) {
  344. jQuery.browser.fullVersion = '' + parseFloat(navigator.appVersion);
  345. jQuery.browser.majorVersion = parseInt(navigator.appVersion, 10);
  346. }
  347. jQuery.browser.version = jQuery.browser.majorVersion;
  348. })(jQuery);
  1.  

ajaxFileUpload onchang上传文件插件第二次失效刷新一次才能再次调用触发change事件的更多相关文章

  1. jQuery的ajaxFileUpload上传文件插件刷新一次才能再次调用触发change

    jQuery的ajaxFileUpload插件 关于用ajaxfileupload时,遇到一个要刷新一次页面才能再次上传,用live()方法来绑定 file表单 的change事件就能够解决,直接$( ...

  2. jQuery的ajaxFileUpload上传插件——刷新一次才能再次调用触发change

    这个问题并不是由change事件失效造成的,而是ajaxFileUpload插件造成的,它会把原来的file元素替换成新的file元素,所以之前绑定的change事件就失效了. 查了一些资料,有些朋友 ...

  3. 【转】JQuery插件ajaxFileUpload 异步上传文件(PHP版)

    前几天想在手机端做个异步上传图片的功能,平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错,但是由于手机不支持flash,所以不得不再找一个文件上传插件来用了.后来发现a ...

  4. JQuery插件ajaxFileUpload 异步上传文件(PHP版)

    太久没写博客了,真的是太忙了.善于总结,进步才会更快啊.不多说,直接进入主题. 前几天想在手机端做个异步上传图片的功能,平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错 ...

  5. Uploadify 上传文件插件详解

    Uploadify 上传文件插件详解 Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中 ...

  6. 项目一:第四天 1、快递员的条件分页查询-noSession,条件查询 2、快递员删除(逻辑删除) 3、基于Apache POI实现批量导入区域数据 a)Jquery OCUpload上传文件插件使用 b)Apache POI读取excel文件数据

    1. 快递员的条件分页查询-noSession,条件查询 2. 快递员删除(逻辑删除) 3. 基于Apache POI实现批量导入区域数据 a) Jquery OCUpload上传文件插件使用 b) ...

  7. 使用 jquery 的 上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能。并且在界面上有radio 的选择内容也要上传

    使用 jquery 的 上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能.并且在界面上有radio 的选择内容也要上传 uploadify 插件的 下载和文档地址  ...

  8. uploadify 上传文件插件

    今天在项目中要用到文件上传功能时,想借助Jquery方式来实现,于是想到用uploadify插件来实现.不经意间在网上看到了一遍关于这个插件的用法,写的很好.在这里就分享给大家,希望对大家有帮助.以下 ...

  9. JQuery插件ajaxFileUpload 异步上传文件

    一.先对ajaxFileUpload插件的语法参数进行讲解 原理:ajaxfileupload是通过监听iframe的onload方法来实现, 当从服务端处理完成后,就触发iframe的onload事 ...

随机推荐

  1. Bandwagon的配置记录(二) —— ftp文件传输

    SSH登录服务器 登录的方法在Bandwagon的配置记录(一) —— kexue上网 配置前的准备 1.新建一个目录(  /home/ftp  ),以后可以把文件放在这里,这里相当于是个中转站 cd ...

  2. seed实验——Set-UID Program Vulnerability实验

    一.实验描述 Set-UID是Unix OS中的一个·非常重要的安全机制.当一个Set-UID程序运行的时候,它具有代码拥有者的权限.举个例子,如果代码的拥有者是root用户,那么不论任何用户运行该程 ...

  3. SEED实验——Environment Variable and Set-UID Program实验报告

    任务一:操作环境变量 实验过程一: 用printenv或env打印出环境变量. 在终端输入命令,显示结果如下图所示: 经过实验发现,printenv和env均可输出当前系统的环境变量.不同的是prin ...

  4. 将本地jar包打包到本地仓库和上传到私服

    1.本地jar打包到本地仓库 mvn install:install-file -Dfile=jar包完整地址或相对地址 -DgroupId=自定义的groupID -DartifactId=自定义的 ...

  5. python—字符串格式化

    字符串格式化 1.% 百分号 ### %s 字符串传值(任何类型的值) ### %d 只能接受数字 print('我是%s,年龄%d' %('刚刚',23) ) ### 我是刚刚,年龄23 print ...

  6. Three.js学习笔记01

    1.四大组件: 场景:场景是所有物体的容器 var scene = new THREE.Scene(); 相机: 正投影相机:远处的和近处的是一样大 THREE.OrthographicCamera ...

  7. 电子科技大学第九届ACM趣味程序设计竞赛(热身赛)题解

    比赛地址:http://acm.uestc.edu.cn/#/contest/show/191 A题 小羽涂色 题意: 在x轴的正半轴上,问你是否存在一段区间[L,R]其中包含r个奇数和g个偶数. 分 ...

  8. 使用 TRESTClient 与 TRESTRequest 作为 HTTP Client

    在 Delphi XE 推出以前的年代,Delphi的发展方向是笔直朝向资料库连结Windows 应用程式这个目标不断前进的,从Delphi 1开始,到Delphi 7,Delphi奠定了VB Kil ...

  9. 麒麟子Cocos Creator实用技巧

    大家好,我是麒麟子, 开源棋牌<幼麟棋牌-四川麻将>(泄漏版叫 <达达麻将>)作者,成都幼麟科技创始人. 自09年进入游戏行业以来,不知不觉已经度过了十个春秋. 曾经我也血气方 ...

  10. 史上最全java面试题

    基本概念 操作系统中 heap 和 stack 的区别 什么是基于注解的切面实现 什么是 对象/关系 映射集成模块 什么是 Java 的反射机制 什么是 ACID BS与CS的联系与区别 Cookie ...