AjaxFileUploader上传插件兼容性好

AjaxFileUploader上传插件兼容性好 Ie Chrome Firefox
html:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><title></title><script src="js/jquery-1.7.1.min.js" type="text/javascript"></script><script src="js/ajaxfileupload.js" type="text/javascript"></script>
</head>
<body><form id="form1" runat="server"><div><input id="fileToUpload" type="file" size="45" name="fileToUpload" class="input" /><button id="buttonUpload" οnclick="return ajaxFileUpload();">上传</button><img id="loading" src="/images/loading.gif" style="display: none;" /><div id="imgshow" style="display: none;"></div></div></form><script type="text/javascript">function ajaxFileUpload() {$("#loading").ajaxStart(function () {$(this).show();}).ajaxComplete(function () {$(this).hide();});$.ajaxFileUpload({url: '/ajax/AjaxFileUploader.ashx',secureuri: false,fileElementId: 'fileToUpload',dataType: 'json',data: { name: 'logan', id: 'id' },success: function (data, status) {if (typeof (data.error) !== 'undefined') {if (data.error !== '') {alert(data.error);} else {// alert(data.msg);$('#imgshow').show();$('#imgshow').append("<img src='/Temp/" + data.msg + "'  width='100' height='60' />");}}},error: function (data, status, e) {alert(e);}})return false;}</script>
</body>
</html>

服务端:

usingSystem.Web;
usingSystem.IO;
namespaceAjaxFileUploader.ajax
{/// <summary>///AjaxFileUploader 的摘要说明/// </summary>public classAjaxFileUploader: IHttpHandler{public voidProcessRequest(HttpContextcontext){if(context.Request.Files.Count > 0){stringpath = context.Server.MapPath("~/Temp");if(!Directory.Exists(path))Directory.CreateDirectory(path);varfile = context.Request.Files[0];stringfileName;if(HttpContext.Current.Request.Browser.Browser.ToUpper() == "IE"){string[] files = file.FileName.Split(new char[] { '\\'});fileName = files[files.Length - 1];}else{fileName = file.FileName;}stringmsg = "";stringstrFileName = fileName;if(string.IsNullOrEmpty(strFileName)){msg = "{";msg += string.Format("error:'{0}',\n", "请选择文件！");msg += string.Format("msg:'{0}'\n", string.Empty);msg += "}";}else{fileName = Path.Combine(path, fileName);file.SaveAs(fileName);msg = "{";msg += string.Format("error:'{0}',\n", string.Empty);msg += string.Format("msg:'{0}'\n", strFileName);msg += "}";}context.Response.Write(msg);}}public boolIsReusable{get{return true;}}}
}

插件:

//ajaxfileupload.js
jQuery.extend({createUploadIframe: function (id, uri) {//创建 framevar 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);},createUploadForm: function (id, fileElementId, data) {//创建 framevar 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) {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);//设置属性jQuery(form).css('position', 'absolute');jQuery(form).css('top', '-1200px');jQuery(form).css('left', '-1200px');jQuery(form).appendTo('body');return form;},ajaxFileUpload: function (s) {s = jQuery.extend({}, jQuery.ajaxSettings, s);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;// 监控请求if (s.global && !jQuery.active++) {jQuery.event.trigger("ajaxStart");}var requestDone = false;// 创建请求对象var xml = {}if (s.global)jQuery.event.trigger("ajaxSend", [xml, s]);//等待一个响应返回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";//请求成功if (status != "error") {// 处理数据var data = jQuery.uploadHttpData(xml, s.dataType);if (s.success)s.success(data, status);// 触发全局返回if (s.global)jQuery.event.trigger("ajaxSuccess", [xml, s]);} elsejQuery.handleError(s, xml, status);} catch (e) {status = "error";jQuery.handleError(s, xml, status, e);}// 请求完成if (s.global)jQuery.event.trigger("ajaxComplete", [xml, s]);// 处理全局AJAX计数器if (s.global && ! --jQuery.active)jQuery.event.trigger("ajaxStop");// 处理结果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}}// 超时检查if (s.timeout > 0) {setTimeout(function () {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 (type == "script")jQuery.globalEval(data);if (type == "json")eval("data = " + data);if (type == "html")jQuery("<div>").html(data).evalScripts();return data;}
})更多上传插件 http://www.cnblogs.com/zengxiangzhan/category/269831.html

转载于:https://www.cnblogs.com/zengxiangzhan/archive/2012/02/12/2348547.html

AjaxFileUploader上传插件兼容性好相关推荐

stream 上传插件 java_stream: 流式（包含断点续传）上传文件，包括前端和java后台...
#Stream 上传插件 Stream 是解决不同浏览器上传文件的插件,是Uploadify的Flash版和Html5版的结合! #Stream 简介 Stream 是根据某网的文件上传插件加工而来, ...
Stream - Web大文件上传插件
Stream 简介 Stream 是根据某网的文件上传插件加工而来,支持不同平台(Windows, Linux, Mac, Android, iOS)下,主流浏览器(IE7+, Chrome, Fir ...
ueditor上传图片回调_（常见解决方法）UEditor报错“后端配置项没有正常加载，上传插件不能正常使用”...
(常见解决方法)UEditor报错"后端配置项没有正常加载,上传插件不能正常使用"_向来萧瑟也无畏-CSDN博客blog.csdn.net 报错信息详见此文的"排错过 ...
js插件---IUpload文件上传插件（包括图片）
js插件---IUpload文件上传插件(包括图片) 一.总结一句话总结:上传插件找到真正上传位置的代码,这样就可以知道整个上传插件的逻辑了, 找资料还是github+官方 1.如何在js中找到真正 ...
fileupload的回调方法_jQuery File Upload文件上传插件使用详解
本篇教程介绍了jQuery File Upload文件上传插件使用详解,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入. < jQuery File Upload 是一个 ...
jquery文件上传插件|进度条
jquery文件上传插件|进度条一.Uploadify 官网:http://www.uploadify.com/ 下载地址:http://down.51cto.com/data/577863 详细参 ...
基于jQuery很牛X的批量上传插件
上传功能应该是每个网站必备的工具之一,因此出现了出现了很多各式各样的上传插件! 本文基于个人经验和使用从插件的:交互体验,易用性,文档,美观度出发,为大家推荐三款很NX的批量上传插件! 下面三款插件的 ...
jQuery 文件上传插件：uploadify、swfupload
jQuery 文件上传插件: uploadify.swfupload
vue前端上传文件夹的插件_基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件...
1. 前言之前公司要在管理系统中做一个全局上传插件,即切换各个页面的时候,上传界面还在并且上传不会受到影响,这在vue这种spa框架面前并不是什么难题.然而后端大佬说我们要实现分片上传.秒传以及断点 ...

AjaxFileUploader上传插件兼容性好

AjaxFileUploader上传插件兼容性好相关推荐

最新文章

热门文章

AjaxFileUploader上传插件 兼容性好

AjaxFileUploader上传插件 兼容性好相关推荐

最新文章

热门文章

AjaxFileUploader上传插件兼容性好

AjaxFileUploader上传插件兼容性好相关推荐