AJAX上传文件到服务器

 ????????????????????????<input type="file" id="fu_UploadFile" name="fu_UploadFile" value="" title="上传附件"> ????????????????????????<input type="button" value="上传" onclick="upload()" /> ?

 ???????function upload() { ???????????var path = document.getElementById("fu_UploadFile").value; ???????????if ($.trim(path) == "") { alert("请选择要上传的文件"); return; } ???????????console.log("test"); ???????????var result_msg = ""; ???????????$.ajaxFileUpload({ ???????????????url: ‘/UpFile.ashx‘, ?//这里是服务器处理的代码 ???????????????type: ‘post‘, ???????????????secureuri: false, //一般设置为false ???????????????fileElementId: ‘fu_UploadFile‘, // 上传文件的id、name属性名 ???????????????dataType: ‘json‘, //返回值类型，一般设置为json、application/json ???????????????data: {}, //传递参数到服务器 ???????????????success: function (data, status) { ???????????????????????if (data.Result) { ???????????????????????????alert("文件成功处理完成!" + data.FileName); ???????????????????????} else { ???????????????????????????alert("文件成功处理出错！原因：" + data.ErrorMessage); ???????????????????????} ???????????????}, ???????????????error: function (data, status, e) { ???????????????????alert("错误：上传组件错误，请检察网络!"); ???????????????} ???????????}); ???????}

 ???/// <summary> ???/// UpFile 的摘要说明 ???/// </summary> ???public class UpFile : IHttpHandler ???{ ???????public void ProcessRequest(HttpContext context) ???????{ ???????????context.Response.ContentType = "text/plain"; ???????????UpFileResult result = new UpFileResult(); ???????????try ???????????{ ???????????????HttpPostedFile _upfile = context.Request.Files["fu_UploadFile"]; ???????????if (_upfile == null) ???????????{ ???????????????throw new Exception("请先选择文件！"); ???????????} ???????????else ???????????{ ???????????????string fileName = _upfile.FileName;/*获取文件名： C:\Documents and Settings\Administrator\桌面\123.jpg*/ ???????????????string suffix = fileName.Substring(fileName.LastIndexOf(".") + 1).ToLower();/*获取后缀名并转为小写： jpg*/ ???????????????int bytes = _upfile.ContentLength;//获取文件的字节大小 ?????????????????// ???????????????if (!(suffix == "jpg" || suffix == "gif" || suffix == "png"|| suffix == "jpeg")) ???????????????????throw new Exception("只能上传JPE，GIF,PNG文件"); ???????????????if (bytes > 1024 * 1024*10) ???????????????????throw new Exception("文件最大只能传10M"); ???????????????string newfileName = DateTime.Now.ToString("yyyyMMddHHmmss"); ???????????????string fileDir = HttpContext.Current.Server.MapPath("~/upfiles/"); ???????????????if (!Directory.Exists(fileDir)) ???????????????{ ???????????????????Directory.CreateDirectory(fileDir); ???????????????} ???????????????result.FileName = fileName; ???????????????result.FileURL = fileDir + newfileName + "." + suffix; ???????????????_upfile.SaveAs(result.FileURL);//保存图片 ???????????????????????????????} ???????????} ???????????catch (System.Exception ex) ???????????{ ???????????????result.Result = false; ???????????????result.ErrorMessage = ex.Message; ???????????} ???????????context.Response.Write(JsonHelper.SerializeObject(result)); ????????} ???????public bool IsReusable ???????{ ???????????get ???????????{ ???????????????return false; ???????????} ???????} ???????public class UpFileResult ??//: AshxCommonResult ???????{ ???????????public bool Result { get; set; } ???????????public string ErrorMessage { get; set; } ???????????public string FileName { get; set; } ???????????public string FileURL { get; set; } ???????}

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) ???{ ???????????//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); ???????????????}, ???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) ???????{ ???????????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 ???????????????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; ???????????????// 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" ) ???????????var reg = /<pre.+?>(.+)<\/pre>/g; ?????????????var result = data.match(reg); ?????????????data = RegExp.$1; ???????????eval( "data = " + data ); ???????// evaluate scripts within html ???????if ( type == "html" ) ???????????jQuery("<div>").html(data).evalScripts(); ???????return data; ???}})