上传文件是常要处理的事情，使用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");
        </span><span style="color: #0000ff;">var</span> result_msg = ""<span style="color: #000000;">;
        $.ajaxFileUpload({
            url: </span>'/UpFile.ashx',  <span style="color: #008000;">//</span><span style="color: #008000;">这里是服务器处理的代码</span>
            type: 'post'<span style="color: #000000;">,
            secureuri: </span><span style="color: #0000ff;">false</span>, <span style="color: #008000;">//</span><span style="color: #008000;">一般设置为false</span>
            fileElementId: 'fu_UploadFile', <span style="color: #008000;">//</span><span style="color: #008000;"> 上传文件的id、name属性名</span>
            dataType: 'json', <span style="color: #008000;">//</span><span style="color: #008000;">返回值类型，一般设置为json、application/json</span>
            data: {}, <span style="color: #008000;">//</span><span style="color: #008000;">传递参数到服务器</span>
            success: <span style="color: #0000ff;">function</span><span style="color: #000000;"> (data, status) {
                    </span><span style="color: #0000ff;">if</span><span style="color: #000000;"> (data.Result) {
                        alert(</span>"文件成功处理完成!" +<span style="color: #000000;"> data.FileName);
                    } </span><span style="color: #0000ff;">else</span><span style="color: #000000;"> {
                        alert(</span>"文件成功处理出错！原因：" +<span style="color: #000000;"> data.ErrorMessage);
                    }
            },
            error: </span><span style="color: #0000ff;">function</span><span style="color: #000000;"> (data, status, e) {
                alert(</span>"错误：上传组件错误，请检察网络!"<span style="color: #000000;">);
            }
        });
    }</span></pre>

　　服务器：

    /// <summary>
    /// UpFile 的摘要说明
    /// </summary>
    public class UpFile : IHttpHandler
    {
    </span><span style="color: #0000ff;">public</span> <span style="color: #0000ff;">void</span><span style="color: #000000;"> ProcessRequest(HttpContext context)
    {
        context.Response.ContentType </span>= <span style="color: #800000;">"</span><span style="color: #800000;">text/plain</span><span style="color: #800000;">"</span><span style="color: #000000;">;
        UpFileResult result </span>= <span style="color: #0000ff;">new</span><span style="color: #000000;"> UpFileResult();
        </span><span style="color: #0000ff;">try</span><span style="color: #000000;">
        {
            HttpPostedFile _upfile </span>= context.Request.Files[<span style="color: #800000;">"</span><span style="color: #800000;">fu_UploadFile</span><span style="color: #800000;">"</span><span style="color: #000000;">];
        </span><span style="color: #0000ff;">if</span> (_upfile == <span style="color: #0000ff;">null</span><span style="color: #000000;">)
        {
            </span><span style="color: #0000ff;">throw</span> <span style="color: #0000ff;">new</span> Exception(<span style="color: #800000;">"</span><span style="color: #800000;">请先选择文件！</span><span style="color: #800000;">"</span><span style="color: #000000;">);
        }
        </span><span style="color: #0000ff;">else</span><span style="color: #000000;">
        {
            </span><span style="color: #0000ff;">string</span> fileName = _upfile.FileName;<span style="color: #008000;">/*</span><span style="color: #008000;">获取文件名： C:Documents and SettingsAdministrator桌面123.jpg</span><span style="color: #008000;">*/</span>
            <span style="color: #0000ff;">string</span> suffix = fileName.Substring(fileName.LastIndexOf(<span style="color: #800000;">"</span><span style="color: #800000;">.</span><span style="color: #800000;">"</span>) + <span style="color: #800080;">1</span>).ToLower();<span style="color: #008000;">/*</span><span style="color: #008000;">获取后缀名并转为小写： jpg</span><span style="color: #008000;">*/</span>
            <span style="color: #0000ff;">int</span> bytes = _upfile.ContentLength;<span style="color: #008000;">//</span><span style="color: #008000;">获取文件的字节大小  
            </span><span style="color: #008000;">//

                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));
    }
    </span><span style="color: #0000ff;">public</span> <span style="color: #0000ff;">bool</span><span style="color: #000000;"> IsReusable
    {
        </span><span style="color: #0000ff;">get</span><span style="color: #000000;">
        {
            </span><span style="color: #0000ff;">return</span> <span style="color: #0000ff;">false</span><span style="color: #000000;">;
        }
    }

    </span><span style="color: #0000ff;">public</span> <span style="color: #0000ff;">class</span> UpFileResult   <span style="color: #008000;">//</span><span style="color: #008000;">: AshxCommonResult</span>

        {

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: </span><span style="color: #0000ff;">function</span><span style="color: #000000;"> (s, xhr, status, e) {
    </span><span style="color: #008000;">//</span><span style="color: #008000;"> If a local callback was specified, fire it</span>
    <span style="color: #0000ff;">if</span><span style="color: #000000;"> (s.error) {
        s.error.call(s.context </span>||<span style="color: #000000;"> s, xhr, status, e);
    }
    </span><span style="color: #008000;">//</span><span style="color: #008000;"> Fire the global callback</span>
    <span style="color: #0000ff;">if</span><span style="color: #000000;"> (s.global) {
        (s.context </span>? jQuery(s.context) : jQuery.event).trigger("ajaxError"<span style="color: #000000;">, [xhr, s, e]);
    }
},
createUploadIframe: </span><span style="color: #0000ff;">function</span><span style="color: #000000;">(id, uri)
{
        </span><span style="color: #008000;">//</span><span style="color: #008000;">create frame</span>
        <span style="color: #0000ff;">var</span> frameId = 'jUploadFrame' +<span style="color: #000000;"> id;
        </span><span style="color: #0000ff;">var</span> iframeHtml = '&lt;iframe id="' + frameId + '" name="' + frameId + '" style="position:absolute; top:-9999px; left:-9999px"'<span style="color: #000000;">;
        </span><span style="color: #0000ff;">if</span><span style="color: #000000;">(window.ActiveXObject)
        {
            </span><span style="color: #0000ff;">if</span>(<span style="color: #0000ff;">typeof</span> uri== 'boolean'<span style="color: #000000;">){
                iframeHtml </span>+= ' src="' + 'javascript:false' + '"'<span style="color: #000000;">;

            }
            </span><span style="color: #0000ff;">else</span> <span style="color: #0000ff;">if</span>(<span style="color: #0000ff;">typeof</span> uri== 'string'<span style="color: #000000;">){
                iframeHtml </span>+= ' src="' + uri + '"'<span style="color: #000000;">;

            }    
        }
        iframeHtml </span>+= ' /&gt;'<span style="color: #000000;">;
        jQuery(iframeHtml).appendTo(document.body);

        </span><span style="color: #0000ff;">return</span> jQuery('#' + frameId).get(0<span style="color: #000000;">);            
},

createUploadForm: </span><span style="color: #0000ff;">function</span><span style="color: #000000;">(id, fileElementId, data)
{
    </span><span style="color: #008000;">//</span><span style="color: #008000;">create form    </span>
    <span style="color: #0000ff;">var</span> formId = 'jUploadForm' +<span style="color: #000000;"> id;
    </span><span style="color: #0000ff;">var</span> fileId = 'jUploadFile' +<span style="color: #000000;"> id;
    </span><span style="color: #0000ff;">var</span> form = jQuery('&lt;form  action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"&gt;&lt;/form&gt;'<span style="color: #000000;">);    
    </span><span style="color: #0000ff;">if</span><span style="color: #000000;">(data)
    {
        </span><span style="color: #0000ff;">for</span>(<span style="color: #0000ff;">var</span> i <span style="color: #0000ff;">in</span><span style="color: #000000;"> data)
        {
            jQuery(</span>'&lt;input type="hidden" name="' + i + '" value="' + data[i] + '" /&gt;'<span style="color: #000000;">).appendTo(form);
        }            
    }        
    </span><span style="color: #0000ff;">var</span> oldElement = jQuery('#' +<span style="color: #000000;"> fileElementId);
    </span><span style="color: #0000ff;">var</span> newElement =<span style="color: #000000;"> jQuery(oldElement).clone();
    jQuery(oldElement).attr(</span>'id'<span style="color: #000000;">, fileId);
    jQuery(oldElement).before(newElement);
    jQuery(oldElement).appendTo(form);


    
    </span><span style="color: #008000;">//</span><span style="color: #008000;">set attributes</span>
    jQuery(form).css('position', 'absolute'<span style="color: #000000;">);
    jQuery(form).css(</span>'top', '-1200px'<span style="color: #000000;">);
    jQuery(form).css(</span>'left', '-1200px'<span style="color: #000000;">);
    jQuery(form).appendTo(</span>'body'<span style="color: #000000;">);        
    </span><span style="color: #0000ff;">return</span><span style="color: #000000;"> form;
},

ajaxFileUpload: </span><span style="color: #0000ff;">function</span><span style="color: #000000;">(s) {
    </span><span style="color: #008000;">//</span><span style="color: #008000;"> TODO introduce global settings, allowing the client to modify them for all requests, not only timeout        </span>
    s =<span style="color: #000000;"> jQuery.extend({}, jQuery.ajaxSettings, s);
    </span><span style="color: #0000ff;">var</span> id = <span style="color: #0000ff;">new</span><span style="color: #000000;"> Date().getTime()        
    </span><span style="color: #0000ff;">var</span> form = jQuery.createUploadForm(id, s.fileElementId, (<span style="color: #0000ff;">typeof</span>(s.data)=='undefined'?<span style="color: #0000ff;">false</span><span style="color: #000000;">:s.data));
    </span><span style="color: #0000ff;">var</span> io =<span style="color: #000000;"> jQuery.createUploadIframe(id, s.secureuri);
    </span><span style="color: #0000ff;">var</span> frameId = 'jUploadFrame' +<span style="color: #000000;"> id;
    </span><span style="color: #0000ff;">var</span> formId = 'jUploadForm' +<span style="color: #000000;"> id;        
    </span><span style="color: #008000;">//</span><span style="color: #008000;"> Watch for a new set of requests</span>
    <span style="color: #0000ff;">if</span> ( s.global &amp;&amp; ! jQuery.active++<span style="color: #000000;"> )
    {
        jQuery.event.trigger( </span>"ajaxStart"<span style="color: #000000;"> );
    }            
    </span><span style="color: #0000ff;">var</span> requestDone = <span style="color: #0000ff;">false</span><span style="color: #000000;">;
    </span><span style="color: #008000;">//</span><span style="color: #008000;"> Create the request object</span>
    <span style="color: #0000ff;">var</span> xml =<span style="color: #000000;"> {}   
    </span><span style="color: #0000ff;">if</span><span style="color: #000000;"> ( s.global )
        jQuery.event.trigger(</span>"ajaxSend"<span style="color: #000000;">, [xml, s]);
    </span><span style="color: #008000;">//</span><span style="color: #008000;"> Wait for a response to come back</span>
    <span style="color: #0000ff;">var</span> uploadCallback = <span style="color: #0000ff;">function</span><span style="color: #000000;">(isTimeout)
    {            
        </span><span style="color: #0000ff;">var</span> io =<span style="color: #000000;"> document.getElementById(frameId);
        </span><span style="color: #0000ff;">try</span><span style="color: #000000;"> 
        {                
            </span><span style="color: #0000ff;">if</span><span style="color: #000000;">(io.contentWindow)
            {
                 xml.responseText </span>= io.contentWindow.document.body?io.contentWindow.document.body.innerHTML:<span style="color: #0000ff;">null</span><span style="color: #000000;">;
                 xml.responseXML </span>= io.contentWindow.document.XMLDocument?<span style="color: #000000;">io.contentWindow.document.XMLDocument:io.contentWindow.document;
                 
            }</span><span style="color: #0000ff;">else</span> <span style="color: #0000ff;">if</span><span style="color: #000000;">(io.contentDocument)
            {
                 xml.responseText </span>= io.contentDocument.document.body?io.contentDocument.document.body.innerHTML:<span style="color: #0000ff;">null</span><span style="color: #000000;">;
                xml.responseXML </span>= io.contentDocument.document.XMLDocument?<span style="color: #000000;">io.contentDocument.document.XMLDocument:io.contentDocument.document;
            }                        
        }</span><span style="color: #0000ff;">catch</span><span style="color: #000000;">(e)
        {
            jQuery.handleError(s, xml, </span><span style="color: #0000ff;">null</span><span style="color: #000000;">, e);
        }
        </span><span style="color: #0000ff;">if</span> ( xml || isTimeout == "timeout"<span style="color: #000000;">) 
        {                
            requestDone </span>= <span style="color: #0000ff;">true</span><span style="color: #000000;">;
            </span><span style="color: #0000ff;">var</span><span style="color: #000000;"> status;
            </span><span style="color: #0000ff;">try</span><span style="color: #000000;"> {
                status </span>= isTimeout != "timeout" ? "success" : "error"<span style="color: #000000;">;
                </span><span style="color: #008000;">//</span><span style="color: #008000;"> Make sure that the request was successful or notmodified</span>
                <span style="color: #0000ff;">if</span> ( status != "error"<span style="color: #000000;"> )
                {
                    </span><span style="color: #008000;">//</span><span style="color: #008000;"> process the data (runs the xml through httpData regardless of callback)</span>
                    <span style="color: #0000ff;">var</span> data =<span style="color: #000000;"> jQuery.uploadHttpData( xml, s.dataType );    
                    </span><span style="color: #008000;">//</span><span style="color: #008000;"> If a local callback was specified, fire it and pass it the data</span>
                    <span style="color: #0000ff;">if</span><span style="color: #000000;"> ( s.success )
                        s.success( data, status );

                    </span><span style="color: #008000;">//</span><span style="color: #008000;"> Fire the global callback</span>
                    <span style="color: #0000ff;">if</span><span style="color: #000000;">( s.global )
                        jQuery.event.trigger( </span>"ajaxSuccess"<span style="color: #000000;">, [xml, s] );
                } </span><span style="color: #0000ff;">else</span><span style="color: #000000;">
                    jQuery.handleError(s, xml, status);
            } </span><span style="color: #0000ff;">catch</span><span style="color: #000000;">(e) 
            {
                status </span>= "error"<span style="color: #000000;">;
                jQuery.handleError(s, xml, status, e);
            }

            </span><span style="color: #008000;">//</span><span style="color: #008000;"> The request was completed</span>
            <span style="color: #0000ff;">if</span><span style="color: #000000;">( s.global )
                jQuery.event.trigger( </span>"ajaxComplete"<span style="color: #000000;">, [xml, s] );

            </span><span style="color: #008000;">//</span><span style="color: #008000;"> Handle the global AJAX counter</span>
            <span style="color: #0000ff;">if</span> ( s.global &amp;&amp; ! --<span style="color: #000000;">jQuery.active )
                jQuery.event.trigger( </span>"ajaxStop"<span style="color: #000000;"> );

            </span><span style="color: #008000;">//</span><span style="color: #008000;"> Process result</span>
            <span style="color: #0000ff;">if</span><span style="color: #000000;"> ( s.complete )
                s.complete(xml, status);

            jQuery(io).unbind()

            setTimeout(</span><span style="color: #0000ff;">function</span><span style="color: #000000;">()
                                {    </span><span style="color: #0000ff;">try</span><span style="color: #000000;"> 
                                    {
                                        jQuery(io).remove();
                                        jQuery(form).remove();    
                                        
                                    } </span><span style="color: #0000ff;">catch</span><span style="color: #000000;">(e) 
                                    {
                                        jQuery.handleError(s, xml, </span><span style="color: #0000ff;">null</span><span style="color: #000000;">, e);
                                    }                                    

                                }, </span>100<span style="color: #000000;">)

            xml </span>= <span style="color: #0000ff;">null</span><span style="color: #000000;">

        }
    }
    </span><span style="color: #008000;">//</span><span style="color: #008000;"> Timeout checker</span>
    <span style="color: #0000ff;">if</span> ( s.timeout &gt; 0<span style="color: #000000;"> ) 
    {
        setTimeout(</span><span style="color: #0000ff;">function</span><span style="color: #000000;">(){
            </span><span style="color: #008000;">//</span><span style="color: #008000;"> Check to see if the request is still happening</span>
            <span style="color: #0000ff;">if</span>( !requestDone ) uploadCallback( "timeout"<span style="color: #000000;"> );
        }, s.timeout);
    }
    </span><span style="color: #0000ff;">try</span><span style="color: #000000;"> 
    {

        </span><span style="color: #0000ff;">var</span> form = jQuery('#' +<span style="color: #000000;"> formId);
        jQuery(form).attr(</span>'action'<span style="color: #000000;">, s.url);
        jQuery(form).attr(</span>'method', 'POST'<span style="color: #000000;">);
        jQuery(form).attr(</span>'target'<span style="color: #000000;">, frameId);
        </span><span style="color: #0000ff;">if</span><span style="color: #000000;">(form.encoding)
        {
            jQuery(form).attr(</span>'encoding', 'multipart/form-data'<span style="color: #000000;">);                  
        }
        </span><span style="color: #0000ff;">else</span><span style="color: #000000;">
        {    
            jQuery(form).attr(</span>'enctype', 'multipart/form-data'<span style="color: #000000;">);            
        }            
        jQuery(form).submit();

    } </span><span style="color: #0000ff;">catch</span><span style="color: #000000;">(e) 
    {            
        jQuery.handleError(s, xml, </span><span style="color: #0000ff;">null</span><span style="color: #000000;">, e);
    }
    
    jQuery(</span>'#' +<span style="color: #000000;"> frameId).load(uploadCallback    );
    </span><span style="color: #0000ff;">return</span> {abort: <span style="color: #0000ff;">function</span><span style="color: #000000;"> () {}};    

},

uploadHttpData: </span><span style="color: #0000ff;">function</span><span style="color: #000000;">( r, type ) {
    </span><span style="color: #0000ff;">var</span> data = !<span style="color: #000000;">type;
    data </span>= type == "xml" || data ?<span style="color: #000000;"> r.responseXML : r.responseText;
    </span><span style="color: #008000;">//</span><span style="color: #008000;"> If the type is "script", eval it in global context</span>
    <span style="color: #0000ff;">if</span> ( type == "script"<span style="color: #000000;"> )
        jQuery.globalEval( data );
    </span><span style="color: #008000;">//</span><span style="color: #008000;"> Get the JavaScript object, if JSON is used.</span>
    <span style="color: #0000ff;">if</span> ( type == "json"<span style="color: #000000;"> )
        </span><span style="color: #0000ff;">var</span> reg = /&lt;pre.+?&gt;(.+)&lt;/pre&gt;/<span style="color: #000000;">g;  
        </span><span style="color: #0000ff;">var</span> result =<span style="color: #000000;"> data.match(reg);  
        data </span>= RegExp.$1<span style="color: #000000;">;
        eval( </span>"data = " +<span style="color: #000000;"> data );
    </span><span style="color: #008000;">//</span><span style="color: #008000;"> evaluate scripts within html</span>
    <span style="color: #0000ff;">if</span> ( type == "html"<span style="color: #000000;"> )
        jQuery(</span>"&lt;div&gt;"<span style="color: #000000;">).html(data).evalScripts();

    </span><span style="color: #0000ff;">return</span><span style="color: #000000;"> data;
}

})