JQuery的ajaxFileUpload圖片上傳初試

本案例主要說講使用ajaxFileUpload實現圖片的異步上傳。

 

1、html代碼部分

這里的代碼，主要設置一下name，后台獲取時候要用到，還有設置一個onchange的事件對應的方法:ajaxFileUpload()

 

插入圖片：<input style="display:initial;" type="file" alt="插入圖片" id="uploadImage" onchange="ajaxFileUpload()" name="uploadImage" /> </span>

 

 

2、js部分代碼

使用這部分代碼，需要引入jq和ajaxfileupload.js這兩個文件。在這里主要設置上傳路徑和對返回的結果做相應的處理

//文件上傳
function ajaxFileUpload() {

    //圖片格式驗證
    var x = document.getElementById("uploadImage");
    if (!x || !x.value) return;
    var patn = /\.jpg$|\.jpeg$|\.png$|\.gif$/i;
    if (!patn.test(x.value)) {
        alert("您選擇的似乎不是圖像文件。");
        x.value = "";
        return;
    }

    var elementIds = ["uploadImage"]; //flag為id、name屬性名
    $.ajaxFileUpload({
        url: '/Forum/SaveImage',//上傳的url，根據自己設置
        type: 'post',
        secureuri: false, //一般設置為false
        fileElementId: 'uploadImage', // 上傳文件的id、name屬性名
        dataType: 'text', //返回值類型，一般設置為json、application/json
        elementIds: elementIds, //傳遞參數到服務器
        success: function (data, status) {
            //alert(data);
            if (data == "Error1") {
                alert("文件太大，請上傳不大於5M的文件！");
                return;
            } else if (data == "Error2") {
                alert("上傳失敗，請重試！");
                return;
            } else {
                //這里為上傳並做一下請求顯示處理，返回的data是對應上傳的文件名
                $("#ReplyContent").append("<img width='300' height='300' src='" + "../UploadFile/ForumImages/" + data + "'/>");

            }
        },
        error: function (data, status, e) {
            alert(e);
        }
    });
    //return false;
}

 

3、后台處理代碼（此處為C#）

后台的處理主要有對上傳文件的格式驗證，文件大小驗證，給文件重命名和設置一下保存路徑，最后返回圖片的新名字。這樣js就可以根據路徑去請求該圖片並展示出來。

try
            {
                //判斷上傳文件的數目
                if (Request.Files.Count > 0)
                {
                    //獲取文件
                    HttpPostedFileBase proImage = Request.Files["upload"];//獲取上傳的圖片


                    //判斷上傳文件大小，小於5M
                    if (proImage.ContentLength > 5 * 1024 * 1024)
                    {
                        return Content("Error1");
                    }
                   
                    //截取圖片類型：image/png
                    string[] filetypes = proImage.ContentType.Split('/');

                    //判斷文件的類型
                    if (filetypes[1] == "jpg" || filetypes[1] == "gif" || filetypes[1] == "png" || filetypes[1] == "bmg" || filetypes[1] == "jpeg")
                    {
                        //給上傳文件重命名
                        string filename = DateTime.Now.ToString("yyyyMMddHHmmssfff") + Guid.NewGuid().ToString();
                        
                        //文件保存的路徑
                        string filesavepath = Server.MapPath("~/Uploadfile/ForumImages/" + filename + "." + filetypes[1]);

                        //保存圖片
                        proImage.SaveAs(filesavepath);



                       //返回文件名，可以在前台展示出來
                       return Content(filename + "." + filetypes[1]);
                    }
                    else
                    {
                        //圖片格式不對
                       return Content("Error2");
                    }

                   
                }
                else
                {    //上傳圖片數目小於或者等於0
                    return Content("Error1");
                }
            }
            catch {
                return Content("Error2");
            }