ajaxFileUpload onchang上传文件插件第二次失效刷新一次才能再次调用触发change事件
关于用ajaxfileupload时,遇到一个要刷新一次页面才能再次上传,
ajaxFileUpload 用onchang上传只能上传一次 第二次就失效了 我找这个问题找了很长时间
- ajaxFileUpload = (fileElementId) => {
- var jq: any = $;
- var that = this;
- var d: any = $(this);
- d.jqLoading();
- jq.ajaxFileUpload
- (
- {
- url: BatchInvoiceUrls.UploadExcelUrl, //用于文件上传的服务器端请求地址
- secureuri: false, //是否需要安全协议,一般设置为false
- fileElementId: fileElementId, //文件上传域的ID
- dataType: 'text', //返回值类型 一般设置为json
- type: "post",
- //contentType: 'text/html;charset=UTF-8',
- //ContentType:'text/html;charset=UTF-8',
- success: function (data, status) //服务器成功响应处理函数
- {
- //这里是成功处理
- $.fn.jqLoading("destroy");
- },
- error: function (data, status, e)//服务器响应失败处理函数
- {
- alert(e);
- }
- }
- )
- $("#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+'\')" />');
- return false;
- }
- onchange需要重新绑定
- ajaxfileupload.js代码:
- jQuery.extend({
- handleError: function (s, xhr, status, e) {
- // If a local callback was specified, fire it
- if (s.error) {
- s.error.call(s.context || s, xhr, status, e);
- }
- // Fire the global callback
- if (s.global) {
- (s.context ? jQuery(s.context) : jQuery.event).trigger("ajaxError", [xhr, s, e]);
- }
- },
- createUploadIframe: function (id, uri) {
- var frameId = 'jUploadFrame' + id;
- if (window.ActiveXObject) {
- if (jQuery.browser.version == "9.0" || jQuery.browser.version == "10.0" || jQuery.browser.version == "11.0") {
- 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;
- },
- ajaxUpload: function (s, xml) {
- //if((fromFiles.nodeType&&!((fileList=fromFiles.files)&&fileList[0].name)))
- var uid = new Date().getTime(), idIO = 'jUploadFrame' + uid, _this = this;
- var jIO = $('<iframe name="' + idIO + '" id="' + idIO + '" style="display:none">').appendTo('body');
- var jForm = $('<form action="' + s.url + '" target="' + idIO + '" method="post" enctype="multipart/form-data"></form>').appendTo('body');
- var oldElement = $('#' + s.fileElementId);
- var newElement = $(oldElement).clone();
- $(oldElement).attr('id', 'jUploadFile' + uid);
- $(oldElement).before(newElement);
- $(oldElement).appendTo(jForm);
- this.remove = function () {
- if (_this !== null) {
- jNewFile.before(jOldFile).remove();
- jIO.remove(); jForm.remove();
- _this = null;
- }
- }
- this.onLoad = function () {
- var data = $(jIO[0].contentWindow.document.body).text();
- try {
- if (data != undefined) {
- data = eval('(' + data + ')');
- try {
- if (s.success)
- s.success(data, status);
- // Fire the global callback
- if (s.global)
- jQuery.event.trigger("ajaxSuccess", [xml, s]);
- if (s.complete)
- s.complete(data, status);
- xml = null;
- } catch (e) {
- status = "error";
- jQuery.handleError(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
- }
- } catch (ex) {
- alert(ex.message);
- };
- }
- this.start = function () { jForm.submit(); jIO.load(_this.onLoad); };
- return this;
- },
- createUploadForm: function (id, url, fileElementId, data) {
- //create form
- var formId = 'jUploadForm' + id;
- var fileId = 'jUploadFile' + id;
- var form = jQuery('<form action="' + url + '" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');
- if (data) {
- for (var i in data) {
- jQuery('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form);
- }
- }
- var oldElement = jQuery('#' + fileElementId);
- var newElement = jQuery(oldElement).clone();
- jQuery(oldElement).attr('id', fileId);
- jQuery(oldElement).before(newElement);
- jQuery(oldElement).appendTo(form);
- //set attributes
- jQuery(form).css('position', 'absolute');
- jQuery(form).css('top', '-1200px');
- jQuery(form).css('left', '-1200px');
- jQuery(form).appendTo('body');
- return form;
- },
- ajaxFileUpload: function (s) {
- // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout
- // Create the request object
- var xml = {};
- s = jQuery.extend({}, jQuery.ajaxSettings, s);
- if (window.ActiveXObject) {
- var upload = new jQuery.ajaxUpload(s, xml);
- upload.start();
- } else {
- var id = new Date().getTime();
- var form = jQuery.createUploadForm(id, s.url, s.fileElementId, (typeof (s.data) == 'undefined' ? false : s.data));
- var io = jQuery.createUploadIframe(id, s.secureuri);
- var frameId = 'jUploadFrame' + id;
- var formId = 'jUploadForm' + id;
- // Watch for a new set of requests
- if (s.global && !jQuery.active++) {
- jQuery.event.trigger("ajaxStart");
- }
- var requestDone = false;
- if (s.global)
- jQuery.event.trigger("ajaxSend", [xml, s]);
- // Wait for a response to come back
- var uploadCallback = function (isTimeout) {
- var io = document.getElementById(frameId);
- try {
- if (io.contentWindow) {
- 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) {
- 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.handleError(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") {
- // process the data (runs the xml through httpData regardless of callback)
- 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]);
- if (s.complete)
- s.complete(data, status);
- } else
- jQuery.handleError(s, xml, status);
- } catch (e) {
- status = "error";
- jQuery.handleError(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
- jQuery(io).unbind();
- setTimeout(function () {
- try {
- jQuery(io).remove();
- jQuery(form).remove();
- } catch (e) {
- jQuery.handleError(s, xml, null, e);
- }
- }, 100);
- xml = null;
- }
- };
- // Timeout checker
- if (s.timeout > 0) {
- setTimeout(function () {
- // Check to see if the request is still happening
- if (!requestDone) uploadCallback("timeout");
- }, s.timeout);
- }
- try {
- var form = jQuery('#' + formId);
- jQuery(form).attr('action', s.url);
- jQuery(form).attr('method', 'POST');
- jQuery(form).attr('target', frameId);
- if (form.encoding) {
- jQuery(form).attr('encoding', 'multipart/form-data');
- }
- else {
- jQuery(form).attr('enctype', 'multipart/form-data');
- }
- jQuery(form).submit();
- } catch (e) {
- jQuery.handleError(s, xml, null, e);
- }
- jQuery('#' + frameId).load(uploadCallback);
- return { abort: function () { } };
- }
- },
- uploadHttpData: function (r, type) {
- 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 = " + $(data).html());
- }
- // evaluate scripts within html
- if (type == "html")
- jQuery("<div>").html(data).evalScripts();
- return data;
- }
- });
- (function (jQuery) {
- if (jQuery.browser) return;
- jQuery.browser = {};
- jQuery.browser.mozilla = false;
- jQuery.browser.webkit = false;
- jQuery.browser.opera = false;
- jQuery.browser.msie = false;
- var nAgt = navigator.userAgent;
- jQuery.browser.name = navigator.appName;
- jQuery.browser.fullVersion = '' + parseFloat(navigator.appVersion);
- jQuery.browser.majorVersion = parseInt(navigator.appVersion, 10);
- var nameOffset, verOffset, ix;
- // In Opera, the true version is after "Opera" or after "Version"
- if ((verOffset = nAgt.indexOf("Opera")) != -1) {
- jQuery.browser.opera = true;
- jQuery.browser.name = "Opera";
- jQuery.browser.fullVersion = nAgt.substring(verOffset + 6);
- if ((verOffset = nAgt.indexOf("Version")) != -1)
- jQuery.browser.fullVersion = nAgt.substring(verOffset + 8);
- }
- // In MSIE, the true version is after "MSIE" in userAgent
- else if ((verOffset = nAgt.indexOf("MSIE")) != -1) {
- jQuery.browser.msie = true;
- jQuery.browser.name = "Microsoft Internet Explorer";
- jQuery.browser.fullVersion = nAgt.substring(verOffset + 5);
- }
- // In Chrome, the true version is after "Chrome"
- else if ((verOffset = nAgt.indexOf("Chrome")) != -1) {
- jQuery.browser.webkit = true;
- jQuery.browser.name = "Chrome";
- jQuery.browser.fullVersion = nAgt.substring(verOffset + 7);
- }
- // In Safari, the true version is after "Safari" or after "Version"
- else if ((verOffset = nAgt.indexOf("Safari")) != -1) {
- jQuery.browser.webkit = true;
- jQuery.browser.name = "Safari";
- jQuery.browser.fullVersion = nAgt.substring(verOffset + 7);
- if ((verOffset = nAgt.indexOf("Version")) != -1)
- jQuery.browser.fullVersion = nAgt.substring(verOffset + 8);
- }
- // In Firefox, the true version is after "Firefox"
- else if ((verOffset = nAgt.indexOf("Firefox")) != -1) {
- jQuery.browser.mozilla = true;
- jQuery.browser.name = "Firefox";
- jQuery.browser.fullVersion = nAgt.substring(verOffset + 8);
- }
- // In most other browsers, "name/version" is at the end of userAgent
- else if ((nameOffset = nAgt.lastIndexOf(' ') + 1) <
- (verOffset = nAgt.lastIndexOf('/'))) {
- jQuery.browser.name = nAgt.substring(nameOffset, verOffset);
- jQuery.browser.fullVersion = nAgt.substring(verOffset + 1);
- if (jQuery.browser.name.toLowerCase() == jQuery.browser.name.toUpperCase()) {
- jQuery.browser.name = navigator.appName;
- }
- }
- // trim the fullVersion string at semicolon/space if present
- if ((ix = jQuery.browser.fullVersion.indexOf(";")) != -1)
- jQuery.browser.fullVersion = jQuery.browser.fullVersion.substring(0, ix);
- if ((ix = jQuery.browser.fullVersion.indexOf(" ")) != -1)
- jQuery.browser.fullVersion = jQuery.browser.fullVersion.substring(0, ix);
- jQuery.browser.majorVersion = parseInt('' + jQuery.browser.fullVersion, 10);
- if (isNaN(jQuery.browser.majorVersion)) {
- jQuery.browser.fullVersion = '' + parseFloat(navigator.appVersion);
- jQuery.browser.majorVersion = parseInt(navigator.appVersion, 10);
- }
- jQuery.browser.version = jQuery.browser.majorVersion;
- })(jQuery);
ajaxFileUpload onchang上传文件插件第二次失效刷新一次才能再次调用触发change事件的更多相关文章
- jQuery的ajaxFileUpload上传文件插件刷新一次才能再次调用触发change
jQuery的ajaxFileUpload插件 关于用ajaxfileupload时,遇到一个要刷新一次页面才能再次上传,用live()方法来绑定 file表单 的change事件就能够解决,直接$( ...
- jQuery的ajaxFileUpload上传插件——刷新一次才能再次调用触发change
这个问题并不是由change事件失效造成的,而是ajaxFileUpload插件造成的,它会把原来的file元素替换成新的file元素,所以之前绑定的change事件就失效了. 查了一些资料,有些朋友 ...
- 【转】JQuery插件ajaxFileUpload 异步上传文件(PHP版)
前几天想在手机端做个异步上传图片的功能,平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错,但是由于手机不支持flash,所以不得不再找一个文件上传插件来用了.后来发现a ...
- JQuery插件ajaxFileUpload 异步上传文件(PHP版)
太久没写博客了,真的是太忙了.善于总结,进步才会更快啊.不多说,直接进入主题. 前几天想在手机端做个异步上传图片的功能,平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错 ...
- Uploadify 上传文件插件详解
Uploadify 上传文件插件详解 Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中 ...
- 项目一:第四天 1、快递员的条件分页查询-noSession,条件查询 2、快递员删除(逻辑删除) 3、基于Apache POI实现批量导入区域数据 a)Jquery OCUpload上传文件插件使用 b)Apache POI读取excel文件数据
1. 快递员的条件分页查询-noSession,条件查询 2. 快递员删除(逻辑删除) 3. 基于Apache POI实现批量导入区域数据 a) Jquery OCUpload上传文件插件使用 b) ...
- 使用 jquery 的 上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能。并且在界面上有radio 的选择内容也要上传
使用 jquery 的 上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能.并且在界面上有radio 的选择内容也要上传 uploadify 插件的 下载和文档地址 ...
- uploadify 上传文件插件
今天在项目中要用到文件上传功能时,想借助Jquery方式来实现,于是想到用uploadify插件来实现.不经意间在网上看到了一遍关于这个插件的用法,写的很好.在这里就分享给大家,希望对大家有帮助.以下 ...
- JQuery插件ajaxFileUpload 异步上传文件
一.先对ajaxFileUpload插件的语法参数进行讲解 原理:ajaxfileupload是通过监听iframe的onload方法来实现, 当从服务端处理完成后,就触发iframe的onload事 ...
随机推荐
- Bandwagon的配置记录(二) —— ftp文件传输
SSH登录服务器 登录的方法在Bandwagon的配置记录(一) —— kexue上网 配置前的准备 1.新建一个目录( /home/ftp ),以后可以把文件放在这里,这里相当于是个中转站 cd ...
- seed实验——Set-UID Program Vulnerability实验
一.实验描述 Set-UID是Unix OS中的一个·非常重要的安全机制.当一个Set-UID程序运行的时候,它具有代码拥有者的权限.举个例子,如果代码的拥有者是root用户,那么不论任何用户运行该程 ...
- SEED实验——Environment Variable and Set-UID Program实验报告
任务一:操作环境变量 实验过程一: 用printenv或env打印出环境变量. 在终端输入命令,显示结果如下图所示: 经过实验发现,printenv和env均可输出当前系统的环境变量.不同的是prin ...
- 将本地jar包打包到本地仓库和上传到私服
1.本地jar打包到本地仓库 mvn install:install-file -Dfile=jar包完整地址或相对地址 -DgroupId=自定义的groupID -DartifactId=自定义的 ...
- python—字符串格式化
字符串格式化 1.% 百分号 ### %s 字符串传值(任何类型的值) ### %d 只能接受数字 print('我是%s,年龄%d' %('刚刚',23) ) ### 我是刚刚,年龄23 print ...
- Three.js学习笔记01
1.四大组件: 场景:场景是所有物体的容器 var scene = new THREE.Scene(); 相机: 正投影相机:远处的和近处的是一样大 THREE.OrthographicCamera ...
- 电子科技大学第九届ACM趣味程序设计竞赛(热身赛)题解
比赛地址:http://acm.uestc.edu.cn/#/contest/show/191 A题 小羽涂色 题意: 在x轴的正半轴上,问你是否存在一段区间[L,R]其中包含r个奇数和g个偶数. 分 ...
- 使用 TRESTClient 与 TRESTRequest 作为 HTTP Client
在 Delphi XE 推出以前的年代,Delphi的发展方向是笔直朝向资料库连结Windows 应用程式这个目标不断前进的,从Delphi 1开始,到Delphi 7,Delphi奠定了VB Kil ...
- 麒麟子Cocos Creator实用技巧
大家好,我是麒麟子, 开源棋牌<幼麟棋牌-四川麻将>(泄漏版叫 <达达麻将>)作者,成都幼麟科技创始人. 自09年进入游戏行业以来,不知不觉已经度过了十个春秋. 曾经我也血气方 ...
- 史上最全java面试题
基本概念 操作系统中 heap 和 stack 的区别 什么是基于注解的切面实现 什么是 对象/关系 映射集成模块 什么是 Java 的反射机制 什么是 ACID BS与CS的联系与区别 Cookie ...