使用Ajax以及Jquery.form非同步上傳圖片，

使用Ajax以及Jquery.form非同步上傳圖片，
一、前言

之前做圖片上傳一直用的第三方外掛程式，Uploadify  這個應該是用的比較多的，同樣也用過別的，在方便了自己的同時也很讚歎人家的功能。思來想去，只會用別的人東西，始終自己學到的少，還是自己做個嘗試一下吧。

二、效果

先來看看效果， 這是做介面開發的時候做的，比較簡陋，只是要實現功能而已。

(1):這是上傳前的。

(2):這是未選擇圖片。

(3)：這是選擇好圖片後的。

(4):這是上傳後的效果，返回圖片路徑 ，然後顯示在頁面上，因為用的是ajax方式，所以不會看到頁面重新整理。

三、實現方式

(1):aspx頁面代碼

    <input id="file_temporaryImage" type="file" name="file_temporaryImage" />  <div id="div_temporaryImage"></div><br />        <input id="btn_temporary" type="button" value="上傳臨時素材" onclick="javascript:TemporaryMedia();" />

(2):所用到的js方法

/***2015年4月29日10:26:17小馬上傳素材管理**//********************上傳臨時素材  Start*****************************/function TemporaryMedia() {    //var image0 = $("input[name='file_temporaryImage']").val();    //判斷上傳控制項中是否選擇了圖片    var image = $("#file_temporaryImage").val();    if ($.trim(image) == "") {        alert("請選擇圖片！");        return;    }    //提交請求處理的url    var actionUrl = "ImageUpload.ashx";    //開始ajax操作    $("#form1").ajaxSubmit({                  type: "POST",//提交類型            dataType: "json",//返回結果格式            url: actionUrl,//請求地址            data: { "action": "TemporaryImage" },//請求資料            success: function (data) {//請求成功後的函數                             if (data.status == "warning") {//返回警告                    alert(data.msg);                } else if (data.status == "success") {//返回成功                    $("#div_temporaryImage").append("<img style='width:300px;height:300px;' src='" + data.msg + "' /><span>臨時素材mediaId:" + data.uploadmsg.media_id + "</span>");                }            },            error: function (data) { alert(data.msg); },//請求失敗函式            async: true         });    }/********************上傳臨時素材  End*****************************/

(3):所用到 的一般處理常式代碼。

using System;using System.IO;using System.Text;using System.Web;using WeiXin_Web.Common;using WX_Tools;using WX_Tools.Entites;namespace WeiXin_Web{    /// <summary>    /// ImageUpload 的摘要說明    /// </summary>    public class ImageUpload : IHttpHandler    {              private HttpContext _httpContext;                       public void ProcessRequest(HttpContext context)        {            _httpContext = context;                                      //  context.Response.ContentType = "text/plain";            //context.Response.Write("Hello World");            //擷取請求            string requestAction=context.Request.Form["action"];            switch (requestAction)            {                    //臨時圖片素材                case "TemporaryImage":                    TemporaryMeidaUpload();                    break;            }        }        //回複訊息狀態        private enum status        {            error,            success,            warning        }        /// <summary>        /// 上傳臨時素材        /// </summary>        private void TemporaryMeidaUpload()        {            //返回格式：{"status":"error,success,warning","msg":""}                // string result = "{\"status\":\"{0}\",\"msg\":\"{1}\"}";                                       try            {                //根據前台html的name擷取檔案                HttpPostedFile upfile = _httpContext.Request.Files["file_temporaryImage"];                if (upfile == null)                {                                       ResponseWriteEnd(status.warning.ToString(), "沒有選擇檔案");                                   }                //檔案原名稱                string oldMediaName = upfile.FileName;                //檔案後輟名稱                string oldMediaExtension = Path.GetExtension(oldMediaName);                //判斷檔案格式是否符合要求                if (!oldMediaExtension.ToLower().Equals(".jpg"))                {                                      ResponseWriteEnd(status.warning.ToString(), "請上傳jpg格式的檔案！");                    return;                }                //判斷檔案大小是否符合要求                if (upfile.ContentLength >= (1024*1024*1))                {                ResponseWriteEnd(status.warning.ToString(), "請上傳1M以內的檔案！");                return;                }                string imgName = DateTime.Now.ToString("yyyy-MM-dd-HH-ss") + DateTime.Now.Ticks;                bool flag = false;                try                {                    upfile.SaveAs(_httpContext.Server.MapPath("/Upload/" + imgName + ".jpg"));                    flag = true;                }                catch (Exception e)                {                                      //寫入日誌                                  }                if (flag)                {                    //返回json                                       ResponseWriteEnd(status.success.ToString(), "/Upload/" + imgName + ".jpg");                                 }                else                {                    File.Delete(_httpContext.Server.MapPath("/Upload/" + imgName + ".jpg"));                                        ResponseWriteEnd(status.warning.ToString(), "圖片儲存出錯，已經被刪除。");                }            }            catch (Exception EX_NAME)            {              ResponseWriteEnd(status.error.ToString(),EX_NAME.ToString());            }        }        /// <summary>        /// 輸出方法        /// </summary>        /// <param name="status"></param>        /// <param name="msg"></param>        private void ResponseWriteEnd(string status,string msg,string uploadMsg="")        {            StringBuilder stringBuilder=new StringBuilder();            stringBuilder.Append("{");            stringBuilder.Append("\"status\":");            stringBuilder.AppendFormat("\"{0}\",", status);            stringBuilder.Append("\"msg\":");            stringBuilder.AppendFormat("\"{0}\",", msg);            stringBuilder.Append("\"uploadmsg\":");            stringBuilder.AppendFormat("{0}", uploadMsg);            stringBuilder.Append("}");            _httpContext.Response.Write(stringBuilder.ToString());           // _httpContext.Response.End();此方法會引起  中止線程錯誤 。           _httpContext.ApplicationInstance.CompleteRequest();        }               public bool IsReusable        {            get            {                return false;            }        }    }}

(4):要記得引入jquery.form.js這個檔案。

四、源碼下載

由於這是我做介面開發中的代碼的一部分，所以這裡給出完整的介面開發的代碼的地址，我託管在了github上，大家可以下載，也可以一起來編寫這個項目。

https://github.com/anyangmaxin/WeiXin

五、歡迎加入.net技術交流群

歡迎加入.net技術交流群