上传文件是常要处理的事情，使用ajaxFileUpload.js处理比较方便，这里的ajaxFileUpload.js文件修改过的，

上传文件是常要处理的事情，使用ajaxFileUpload.js处理比较方便，这里的ajaxFileUpload.js文件修改过的，

Html部分

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

JS部分：

        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;

　　　　　　　　　　　　string saveDir = fileDir + newfileName + "." + suffix;
　　　　　　　　　　　　result.FileURL = "~/upfiles/" + 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; }

}

ajaxfileupload.js

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😒.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;

}

})