js异步上传图片

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 ; }

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(); }

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; } })

// <%@ 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 ; } } }

<! !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 >