ajaxFileUpload

ajaxfileupload.js ajaxfileupload.js可以兼容IE8以下版本实现无刷新的Form提交,上传文件。 这个版本修改了提交后台失败的几个bug 使用是需注意以下几点: 1.调用createUploadForm,此方法中增加了change参数,此参数用户给新生成的input-file元素绑定change事件,如果不需要可以不加此参数。 2.要上传的input-file元素,建议放id和name属性,而且这两个属性值要保持一致 3.后台代码中,response里的contenttype要设置为"text/html",前台的success回调中对返回值作处理 例子如下: js: $.ajaxFileUpload({ url: url, type: 'post', data: data, secureuri: false, fileElementId: fileId, // input-file的id、name属性名 dataType: 'JSON', beforeSend: function (XMLHttpRequest) { //show loading... }, success: function (data, status) { data = jQuery.parseJSON(data); success(data); }, error: function (data, status, e) { error(e); }, complete: function (XMLHttpRequest, textStatus) { //hide loading... }, change: change //需要绑定到动态生成的input-file元素上的change事件处理方法;没有的话,这个参数可以不写 }); 如果加了change,change方法中需要处理一下,因为发现会被调2次 function Upload(event) { var fileid = $(event.target).attr('id'); if(isNullOrEmpty(fileid) || /^jUploadFile\d+$/.test(fileid))return; //注意:此处过滤无效调用 //... } 后台代码(ashx): public void ProcessRequest(HttpContext context) { try { context.Response.ContentType = "text/html"; var request = context.Request; var param1 = request.Params["param1"]; //取参数 //取上传文件 if (request.Files == null || request.Files.Count <= 0) throw new ApplicationException("no file to be uploaded!"); var file = request.Files[0]; var filename = System.IO.Path.GetFileName(file.FileName); var serverpath = Path.Combine(context.Server.MapPath(ROOT), filename); file.SaveAs(serverpath); //自定义返回Json字符串 var json = '{' + string.Format(json, id, finfo.Name, extension, path) + '}'; response.Write(json); return; } 立即下载

多层级data,加入beforeSend方法,返回false终止上传

jQuery.extend({
	createUploadIframe : function(id, uri) {
		// create frame
		var frameId = 'jUploadFrame' + id;
		var iframeHtml = '<iframe id="'
				+ frameId
				+ '" name="'
				+ frameId
				+ '" style="position:absolute; top:-9999px; left:-9999px"';
		if (window.ActiveXObject) {
			if (typeof uri == 'boolean') {
				iframeHtml += ' src="' + 'javascript:false' + '"';

			} else if (typeof uri == 'string') {
				iframeHtml += ' src="' + uri + '"';

			}
		}
		iframeHtml += ' />';
		jQuery(iframeHtml).appendTo(document.body);

		return jQuery('#' + frameId).get(0);
	},
	mergeFormData : function(data, pix, form) {
		for ( var i in data) {
			if (typeof (data[i]) == 'object') {
				if (pix != '') {
					jQuery.mergeFormData(data[i], pix + '[' + i + ']',
							form);
				} else {
					jQuery.mergeFormData(data[i], i, form);
				}
			} else if (pix != '') {
				jQuery(
						'<input type="hidden" name="' + pix + '[' + i
								+ ']" value="' + data[i] + '" />')
						.appendTo(form);
			} else {
				jQuery(
						'<input type="hidden" name="' + i + '" value="'
								+ data[i] + '" />').appendTo(form);
			}
		}
	},
	createUploadForm : function(id, fileElementId, data) {
		// create form
		var formId = 'jUploadForm' + id;
		var fileId = 'jUploadFile' + id;
		var form = jQuery('<form  action="" method="POST" name="'
				+ formId + '" id="' + formId
				+ '" enctype="multipart/form-data"></form>');
		if (data) {
			jQuery.mergeFormData(data, '', 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');
		// console.log(form);
		return form;
	},

	ajaxFileUpload : function(s) {
		// TODO introduce global settings, allowing the client to modify
		// them for all requests, not only timeout
		s = jQuery.extend({}, jQuery.ajaxSettings, s);
		if (!s.beforeSend(s))
			return;
		var id = new Date().getTime()
		var form = jQuery.createUploadForm(id, 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;
		// Create the request object
		var xml = {}
		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 ]);
					} 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
				if (s.complete)
					s.complete(xml, status);

				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") {
			// chrome含style,firefox不含
			data = data
					.replace(
							'<pre style="word-wrap: break-word; white-space: pre-wrap;">',
							'').replace('<pre>', '').replace('</pre>',
							'').replace(/\\/g, '/');

			eval("data = " + data);
		}
		// evaluate scripts within html
		if (type == "html")
			jQuery("<div>").html(data).evalScripts();

		return data;
	}
});

 

浅谈jQuery中Ajax事件beforesend及各参数含义 Ajax会触发很多事件。 有两种事件,一种是局部事件,一种是全局事件: 局部事件:通过$.ajax来调用并且分配。 $.ajax({ beforeSend: function(){ // Handle the beforeSend event }, complete: function(){ // Handle the complete event } // ... }); 全局事件,可以用bind来绑定,用unbind来取消绑定。这个跟click/mousedown/keyup等事件类似。但他可以传递到每一个DOM元素上。 $("#loading").bind("ajaxSend", 立即下载

相关推荐

report_delay_calculation/check_timing/report_annotated_parasitics/report_analysis_coverge

如何debug 一颗cell 或一段net 的delay, 常用的办法是用report_delay_calculation 报这颗cell 或这段net, 会得到形式如下的report, 从该report 中可以得到: 表头需要特别关注的是command, 确定report 的对象及加的option; From/To pin: cell 的input pin 和...

diedai7174的博客 1798

C#_ajax fileupload

@{ ViewBag.Title = "Index"; Layout = null; } <h2>Index</h2> <script src="~/Scripts/ajaxfileupload.js"></script> <script src="~/Scripts/jquery.js"...

weixin_34409741的博客 155

别再问ARM麒麟怎么装微信了!手把手教你用铠大师搞定Windows软件(飞腾/海思芯片实测)

本文详细介绍了如何在ARM架构的信创电脑(如飞腾/海思芯片)上使用铠大师安装和运行Windows软件,解决微信、Office等常用软件的兼容性问题。通过实测数据对比,铠大师在性能和易用性上显著优于传统方案,为麒麟系统用户提供了一套完整的解决方案。

weixin_28736355的博客 894

ajaxFileUpload的使用

最近在做一个微商城的项目涉及到一个图片的上传,起初是用jquery的ajax方法结果它不能解析enctype="multipart/form-data",不能成功将type=file类型的数据传交给后台。后来在$.ajax方法中加了个enctype="multipart/form-data"后但是发现发出的请求地址错误,最终放弃了用jquery  ajxa的方法传送,最后选择了ajaxFileUp

cly153239的专栏 571

模型优化系列——模型剪枝/量化概述

模型优化目的:通过减少模型大小,提高推理速度等使模型成功部署在各个硬件中并实时有效运作。

qq_61210574的博客 1293

射频测试基础知识总结

表示可以辐射到空间的电磁频率,频率范围从300KHz~110GHz之间,射频简称RF,是高频交流变化电磁波的简称,其每秒变化小于1000次被称为低频电流,超过10000次的称为高频电流,而射频就是这种高频电流。为了确保天线接收的信号能够在接收机的最后一级被正确的恢复,一个好的低噪音放大器需要在放大信号的同时产生尽可能低的噪音以及失真。两种,带内试验的范围也有一定的差别,比如,带内试验主要是检测信号的质量,如功率、频谱宽度、调制质量,而带外测试的是信号的杂散、谐波,主要是看对频带之外的干扰有多大。

cny70的博客 9628

回忆起ajax上传

以前的项目大多的使用jquery的插件来进行文件上传,对于就只引用jquery而不使用插件来上传文件之前未有写过,最近项目里有写到和用到,就记录一下,以后方便查找。 提示:存在浏览器皆容问题,谨慎使用。 HTML代码: &lt;form id="infoLogoForm" enctype='multipart/form-data'&gt; &lt;div class="cnt-...

qq_39981183的博客 266

电路方案分析(十二)USB Type-C PD 移动电源参考设计方案

TPD8S300为USB Type-C连接器的CC1,CC2,SBU1和SBU2引脚集成了四个通道的20v短到vbus和过压保护。TPD8S300集成了八个IEC61000-4-2ESD保护通道,用于USB Type-C连接器的CC1、CC2、SBU1、SBU2、DP_T (顶侧D-) 、DM_T (顶侧D-) 、DP_B (底侧D-) 引脚。当电源组是接收器并为其自身的电池充电时,该芯片会对电池充电,而在电源模式期间,该芯片充当DC-DC转换器以生成VBUS。

小幽余生不加糖 2万+

Ajaxfileupload上传多张图片

Ajaxfileupload上传图片 第一步:引用ajaxfileupload.js插件 eg: 第二步:在页面上调用ajaxfileupload中ajaxFileUpload方法 eg: $(function () { $("#Add").click(function () { //传值到后台

qq_31752831的博客 2104

不会C# Winform用户界面设计?是因为没有掌握这些控件(建议收藏)

文章目录6.1 常用控件6.1.1 单选按钮(RadioButton)6.1.2 复选框(CheckBox)6.1.3 框架1. 面板控件Panel2. 分组框GroupBox3. TabControl控件6.1.4 应用实例6. 2 列表框和组合框6.2.1 列表框(ListBox)6.2.2 组合框(ComboBox )6.2.3 应用实例6.3 用户交互界面6.3.1 滚动条和进度条6.3.2 定时器6.3.3 菜单设计菜单设计概述MenuStrip和ContextMenuSt

智慧空间实验室 2920

基于FPGA的NCO实现

NCO实现原理 数字振荡器 输出频率,相位可控的正弦波,精度高,稳定性高,替代VCO,用起来方便也易于操作。 实现方式: 直接调用fpga里面的ip核,以下是IP核的配置方法: 接下来选择输出为单路还是多路: 最后生成ip核时需要注意的事项: 生成时会需要漫长的等待,因此需要如下操作: 最后成功生成: 实现代码: input clk ; input rst_n ; output [13:0]fsin_i ; wire [13:.

m0_46644103的博客 4581

jQuery插件之ajaxFileUpload

ajaxFileUpload.js 很多同名的,因为做出来一个很容易。 我用的是这个:https://github.com/carlcarl/AjaxFileUpload 下载地址在这里:https://files.cnblogs.com/files/kissdodog/ajaxfileupload_JS_File.rar AjaxFileUpload.js并不是一个很出名的插件,只是别人写好的放出来供大家用,原理都是创建隐藏的表单和iframe然后用JS去提交,获得返回值。 当初做了个异步上传的.

liuno0的博客 3193

数据资产可视化分析:PowerBI在大数据管理中的实战

目的:帮你搞懂“为什么数据资产需要可视化?”“PowerBI能帮企业解决什么问题?”,并掌握用PowerBI做大数据可视化的实战技巧。范围:覆盖数据资产定义、可视化分析原理、PowerBI核心功能(数据连接、建模、可视化)、零售企业实战案例,以及未来趋势与挑战。背景:为什么企业的数据像乱堆的玩具?核心概念:数据资产、可视化分析、PowerBI分别是什么?它们怎么配合?实战步骤:用PowerBI帮零售企业整理“销售玩具箱”,做出能指导决策的仪表盘;应用场景:不同部门怎么用这个“整理好的玩具箱”?

2501_92132293的博客 906

ajaxfileupload源码

ajaxfileupload.js源码整理,handleError错误的分析,上传文件类型和大小的判断

专注前端开发 484

IMSL CNL 7.0.0 (x86-64)Crack

IMSL CNL 7.0.0 (x86-64)Crack intel的算法库破解文件,这是C++版本的破解文件

ssm框架搭建

这个是一个在idea上成功跑起来的ssm框架项目,保存在这里方便以后使用直接下载

AjaxFileUpload实现多文件上传

去年5月中旬在项目中使用过Ajax上传文件(一直都在飘,也就最近两周开始写博客了),现在要使用的时候不得不再去看过去的代码了,我是将原本的 AjaxFileUpload 单文件改成了多文件上传的,虽然不是太灵活但也能满足需求了。 使用的是 AjaxFileUpload v2.1,地址 http://www.phpletter.com/Our-Projects/AjaxFileUpload/ 完

拭血的专栏 810

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版 【x86|x64】

jQuery 插件:ajaxFileUpload

是一种常用的,它用于通过实现文件的异步上传,不需要重新加载页面或者跳转到另一个页面。通过,可以提升用户体验,因为用户可以在不刷新页面的情况下上传文件并处理返回的结果。这里会介绍插件的基本使用方法,并展示一个简单的文件上传示例。

wangjinjin180的博客 877

android 蓝牙通讯demo

android 下蓝牙通讯demo,实现了发现蓝牙,使能蓝牙,通过蓝牙发送消息。

php ajaxfileupload,ajaxfileupload异步上传图片

使用的时候记得引用ajaxfileupload.js和 jquery-3.0.0.min.j两个js文件,ajaxfileupload.js请使用我下面附上的代码,其中它加了个扩展,可传递额外参数upload.htmlajaxfileuploadͼƬʏԫ࠘ݾ$(function(){$("#buttonUpload").click(function(){$.ajaxFileUpload({url:...

weixin_33221829的博客 225

ajaxfileupload

1jQuery.extend({2createUploadIframe:function(id,uri){//id为当前系统时间字符串,uri是外部传入的json对象的一个参数3//createframe4varframeId='jUploadFrame'+id;//给iframe添加一个独...

Tunny20121011的博客 121

<<< ajaxfileupload介绍

ajaxfileupload,jquery的一个异步上传插件,使用此插件你可以不用建立form,他会自动生成表单,且自动设置好enctype="multipart/form-data"属性,使用这个插件的前提就是要先引入jquery的包 语法: function fileLoad(){  $.ajaxFileUpload({   TYPE:"POST", ...

anba7411的博客 129

ajaxfileupload 返回值_Ajaxfileupload 上传文件后返回response的contentType错误问题

使用ajaxFileupload上传文件,将文件内容以json方式返回显示到浏览器。问题:返回的文件内容较小时正常,但当返回的json数据大概大于10K后,返回到浏览器后弹出保存文件对话框,无法正常显示。经过测试,如果去掉上传文件功能,可以正常返回300K的json数据。struts2设置response contentType 为text/html。另外设置为text/plain、applica...

weixin_39557087的博客 543

$.ajaxFileUpload

2019独角兽企业重金招聘Python工程师标准>>> ...

weixin_34186128的博客 579
上一篇: PHP大数字计算
下一篇: easyui filebox 上传类型控制
lymkill
博客等级 码龄17年 1粉丝 11原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值