js异步上传图片

简介: 通过iframe来实现无刷新的的文件上传,其实是有刷新的,只是在iframe里面隐藏了而已   简单的原理说明:   form里面的target要与iframe里面的id的值相等,指示是form相应了post事件,也就是post时间相应的时候刷新的是iframe而不是整个页面。

通过iframe来实现无刷新的的文件上传,其实是有刷新的,只是在iframe里面隐藏了而已

 

简单的原理说明:

<form id="form1" method="post" action="upload.do" enctype="multipart/form-data"  target="uploadframe" >
<input type="file" id="upload" name="文件上传" />
</form>

<iframe id="uploadframe" name="result_frame"   style="visibility:hidden;"></iframe>

 

form里面的target要与iframe里面的id的值相等,指示是form相应了post事件,也就是post时间相应的时候刷新的是iframe而不是整个页面。

 

二、

利用jQuery的插件AjaxFileUpload 可以简单地实现这个异步的上传的效果      插件地址: http://www.phpletter.com/Our-Projects/AjaxFileUpload/

 

 <script type="text/javascript" language="javascript" src="js/jquery.js"></script>

 <script type="text/javascript" language="javascript" src="js/ajaxfileupload.js"></script>

 

复制代码
 
   
function ajaxFileUpload() { $( " #loading " ) .ajaxStart( function (){ $( this ).show(); }) .ajaxComplete( function (){ $( this ).hide(); }); $.ajaxFileUpload ( { url: ' Upload.ashx ' , secureuri: false , fileElementId: ' fileToUpload ' , dataType: ' json ' , success: function (data, status) { if ( typeof (data.error) != ' undefined ' ) { if (data.error != '' ) { alert(data.error); } else { alert(data.msg); } } }, error: function (data, status, e) { alert(e); } } ) return false ; }
复制代码

 

 

<input id="fileToUpload" type="file" size="45" name="fileToUpload">

<input type="button" id="buttonUpload" onclick="return ajaxFileUpload();">
       上传</input>

 

 

Upload.ashx

 

复制代码
 
   
if (Request.Files.Count > 0 ) { HttpPostedFile file = Request.Files[ 0 ]; string msg = "" ; string error = "" ; if (file.ContentLength == 0 ) error = " 文件长度为0 " ; else { file.SaveAs(Server.MapPath( " file " ) + " \\ " + Path.GetFileName(file.FileName)); msg = " 上传成功 " ; } string result = " { error:' " + error + " ', msg:' " + msg + " '} " ; Response.Write(result); Response.End(); }
复制代码

 

 

 

 

PS:ajaxfileupload.js代码

 

复制代码
 
   
jQuery.extend({ createUploadIframe: function (id, uri) { // create frame var frameId = ' jUploadFrame ' + id; if (window.ActiveXObject) { 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 }, createUploadForm: function (id, fileElementId) { // create form var formId = ' jUploadForm ' + id; var fileId = ' jUploadFile ' + id; var form = $( ' <form action="" method="POST" name=" ' + formId + ' " id=" ' + formId + ' " enctype="multipart/form-data"></form> ' ); var oldElement = $( ' # ' + fileElementId); var newElement = $(oldElement).clone(); $(oldElement).attr( ' id ' , fileId); $(oldElement).before(newElement); $(oldElement).appendTo(form); // set attributes $(form).css( ' position ' , ' absolute ' ); $(form).css( ' top ' , ' -1200px ' ); $(form).css( ' left ' , ' -1200px ' ); $(form).appendTo( ' body ' ); 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); var id = new Date().getTime() var form = jQuery.createUploadForm(id, s.fileElementId); 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 { $(io).remove(); $(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 io = $('#' + frameId); var form = $( ' # ' + formId); $(form).attr( ' action ' , s.url); $(form).attr( ' method ' , ' POST ' ); $(form).attr( ' target ' , frameId); if (form.encoding) { form.encoding = ' multipart/form-data ' ; } else { form.enctype = ' multipart/form-data ' ; } $(form).submit(); } catch (e) { jQuery.handleError(s, xml, null , e); } if (window.attachEvent){ document.getElementById(frameId).attachEvent( ' onload ' , uploadCallback); } else { document.getElementById(frameId).addEventListener( ' load ' , uploadCallback, false ); } 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 ); // evaluate scripts within html if ( type == " html " ) jQuery( " <div> " ).html(data).evalScripts(); // alert($('param', data).each(function(){alert($(this).attr('value'));})); return data; } })
复制代码

 

 三、纯iframe实现上传

upload.ashx

 

复制代码
 
   
// <%@ WebHandler Language="C#" Class="upload" %> using System; using System.Web; public class upload : IHttpHandler { private string Js( string v) { // 此函数进行js的转义替换的,防止字符串中输入了'后造成回调输出的js中字符串不闭合 if (v == null ) return "" ; return v.Replace( " ' " , @" \' " ); } // 下面就是一个简单的示例,保存上传的文件,如果要验证上传的后缀名,得自己写,还有写数据库什么的 public void ProcessRequest (HttpContext context) { HttpRequest Request = context.Request; HttpResponse Response = context.Response; HttpServerUtility Server = context.Server; // 指定输出头和编码 Response.ContentType = " text/html " ; Response.Charset = " utf-8 " ; HttpPostedFile f = Request.Files[ " upfile " ]; // 获取上传的文件 string des = Request.Form[ " des " ] // 获取描述 ,newFileName = Guid.NewGuid().ToString(); // 使用guid生成新文件名 if (f.FileName == "" ) // 未上传文件 Response.Write( " <script>parent.UpdateMsg('','');</script> " ); // 输出js,使用parent对象得到父页的引用 else { // 保存文件 newFileName += System.IO.Path.GetExtension(f.FileName); // 注意加上扩展名 try { f.SaveAs(Server.MapPath( " ~/uploads/ " + newFileName)); // 如果要保存到其他地方,注意修改这里 // 调用父过程更新内容,注意要对des变量进行js转义替换,防止字符串不闭合提示错误 Response.Write( " <script>parent.UpdateMsg(' " + Js(des) + " ',' " + newFileName + " ')</script> " ); } catch { Response.Write( " <script>alert('保存文件失败!\\n请检查文件夹是否有写入权限!');</script> " ); // 如果保存失败,输出js提示保存失败 } } } public bool IsReusable { get { return false ; } } }
复制代码

 

 

test.htm

复制代码
 
   
<! !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 > < meta http-equiv ="content-type" content ="text/html;charset=utf-8" /> < title > 使用隐藏的Iframe实现ajax无刷新上传 </ title > </ head > < body > < script type ="text/javascript" > function UpdateMsg(des,filename){ // 此函数用来提供给提交到的页面如upload.ashx输出js的回调,更新当前页面的信息 if (filename == '' ){alert( ' 未上传文件! ' ); return false ;} document.getElementById( ' ajaxMsg ' ).innerHTML = ' 你在表单中输入的“文件描述”为: ' + des + ' <br/> ' + ' 上传的图片为:<a href="uploads/ ' + filename + ' " target="_blank"> ' + filename + ' </a> ' ; } function check(f){ if (f.des.value == '' ){ alert( ' 请输入文件描述! ' );f.des.focus(); return false ; } if (f.upfile.value == '' ){ alert( ' 请选择文件! ' );f.upfile.focus(); return false ; } } </ script > <!-- 隐藏的iframe来接受表单提交的信息 --> < iframe name ="ajaxifr" style ="display:none;" ></ iframe > <!-- 这里设置target="ajaxifr",这样表单就提交到iframe里面了,和平时未设置target属性时默认提交到当前页面 --> <!-- 注意一点的是使用iframe时在提交到的页面可以直接输出js来操作父页面的信息,一般的ajax提交文本信息时你需要返回信息,如果是js信息你还得eval下 --> < form method ="post" enctype ="multipart/form-data" action ="upload.ashx" target ="ajaxifr" onsubmit ="return check(this)" > 文件描述: < input type ="text" name ="des" />< br > 选择文件: < input type ="file" name ="upfile" />< br > < input type ="submit" value ="提交" /> </ form > <!-- 放入此div用来实现上传的结果 --> < div id ="ajaxMsg" ></ div > </ body > </ html >
相关文章
|
4天前
|
前端开发 JavaScript
杨老师课堂之JavaScript案例手动切换轮播图片
杨老师课堂之JavaScript案例手动切换轮播图片
10 2
|
4天前
|
前端开发 JavaScript
杨老师课堂之JavaScript案例之自动切换轮播图片
杨老师课堂之JavaScript案例之自动切换轮播图片
9 1
|
9天前
|
前端开发 JavaScript 数据处理
在JavaScript中,异步函数是指那些不会立即执行完毕,而是会在未来的某个时间点(比如某个操作完成后,或者某个事件触发后)才完成其执行的函数
【6月更文挑战第15天】JavaScript中的异步函数用于处理非同步任务,如网络请求或定时操作。它们使用回调、Promise或async/await。
21 7
|
1月前
|
前端开发 JavaScript UED
深入理解 JavaScript 同步和异步,让网页灵动起来!
深入理解 JavaScript 同步和异步,让网页灵动起来!
|
7天前
|
Web App开发 JavaScript 前端开发
使用 JS 实现在浏览器控制台打印图片 console.image()
在前端开发过程中,调试的时候,我们会使用 console.log 等方式查看数据。但对于图片来说,仅靠展示的数据与结构,是无法想象出图片最终呈现的样子的。 虽然我们可以把图片数据通过 img 标签展示到页面上,或将图片下载下来进行预览。但这样的调试过程实在是复杂,何不实现一个 console.image() 呢?
17 1
使用 JS 实现在浏览器控制台打印图片 console.image()
|
17天前
|
JavaScript 前端开发 安全
80 行 JS 代码实现页面添加水印:文字水印、多行文字水印、图片水印、文字&图片水印
80 行 JS 代码实现页面添加水印:文字水印、多行文字水印、图片水印、文字&图片水印 1. 信息标识: 水印可以用于标识文档的所有者、保密级别、状态或其他相关信息,帮助用户更好地理解文档内容的属性。 2. 版权保护: 在文档中添加水印可以帮助保护内容的版权,防止他人未经授权地复制、转载或篡改内容。 3. 安全保护: 对于敏感信息或机密文档,添加水印可以帮助防止信息泄露,提高文档的安全性。 4. 提升专业性: 在一些场景下,如商业报告、合同文件等,添加水印可以增加文档的专业性和正式性。 5. 防止截屏或拷贝: 在网页中添加水印可以防止用户通过截屏或复制粘贴等方式非法获取文档内容。
19 1
80 行 JS 代码实现页面添加水印:文字水印、多行文字水印、图片水印、文字&图片水印
|
4天前
|
前端开发 JavaScript
杨校老师课堂之JavaScript案例之跑马灯左右无缝连接图片自动轮播
杨校老师课堂之JavaScript案例之跑马灯左右无缝连接图片自动轮播
8 2
|
12天前
|
前端开发 JavaScript 开发者
JavaScript中的异步操作与回调地狱解决方法
JavaScript中的异步操作与回调地狱解决方法 在现代的Web开发中,JavaScript扮演着极为重要的角色,尤其是在处理网络请求、文件操作或者任何可能耗费时间的操作时。为了不阻塞程序的执行,JavaScript 提供了异步编程模型。本文将介绍JavaScript中的异步操作是什么,什么是回调地狱,以及如何解决回调地狱问题。 什么是异步操作? 异步操作指的是那些不会立即完成的操作,程序可以在等待异步操作完成的同时,继续执行其他代码。JavaScript通常使用事件循环机制处理异步操作,这使得它可以在不阻塞主线程的情况下执行任务。 常见的异步操作包括: 网络请求(如使用 XMLHt
9 2
|
17天前
|
监控 前端开发 JavaScript
JS Navigator.sendBeacon 可靠的、异步地向服务器发送数据
Navigator.sendBeacon 是一个用于发送少量数据到服务器的 API,尤其适用于在页面即将卸载时发送数据,如日志记录、用户行为分析等。 与传统的 AJAX 请求不同,sendBeacon 方法的设计目标是确保数据在页面卸载(例如用户关闭标签页或导航到新页面)时能够可靠地发送。 Navigator.sendBeacon 方法可用于通过 HTTP POST 将少量数据异步传输到 Web 服务器。 它主要用于将统计数据发送到 Web 服务器,同时避免了用传统技术(如:XMLHttpRequest)发送分析数据的一些问题。
21 1
|
21天前
|
前端开发 JavaScript 开发者
JavaScript异步编程艺术:深入浅出回调函数与异步挑战【含代码示例】
本文深入解析JavaScript异步编程,重点探讨回调函数和异步挑战。在单线程的JavaScript中,异步编程至关重要,回调函数是其基础。然而,回调地狱问题催生了Promise和async/await的出现。文章提供代码示例展示Promise和async/await的使用,并分享异步编程最佳实践,包括错误处理、资源管理和性能优化。遇到问题时,建议通过明确异步流程、逐步调试和异常捕获来解决。最后,文章强调异步编程的未来发展,鼓励开发者掌握最新工具并探讨更高效的异步解决方案。
22 2