ajaxfileupload插件上傳圖片功能，用MVC和aspx作後臺各寫了一個案例

時間 2019-11-29

標籤 ajaxfileupload 插件上傳圖片功能 mvc aspx 後臺寫了一個案例欄目 Ajax 简体版

原文原文鏈接

HTML代碼和js 代碼javascript

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/js/jquery-1.8.3.min.js"></script>
    <script src="~/js/ajaxfileupload.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#butLoad").click(function () {
                $("#img1").attr("src", "../images/timg.gif");
                //調用action
                $.ajaxFileUpload({
                    url: "../Upload/UpLoad",
                    secureuri: false, //通常設置爲false
                    fileElementId: 'Img', //文件上傳空間的id屬性  <input type="file" id="Img" name="file" />
                    dataType: 'json', //返回值類型  
                    success: function (data, status)  //服務器成功響應處理函數
                    {
                        $("#img1").attr("src", data.imgurl);
                        if (typeof (data.error) != 'undefined') {
                            if (data.error != '') {
                                alert(data.error);
                            } else {
                                alert(data.msg);
                            }
                        }
                    },
                    error: function (data, status, e)//服務器響應失敗處理函數
                    {
                        alert(e);
                    }

                });
            });

            $("#butLoadAsp").click(function () {
                $("#imgAsp").attr("src", "../images/timg.gif");
                //調用aspx
                $.ajaxFileUpload({
                    url: "../Ajax/UpLoad.aspx?__Action=UpLoadImg",
                    secureuri: false, //通常設置爲false
                    fileElementId: 'ImgAsp', //文件上傳空間的id屬性  <input type="file" id="Img" name="file" />
                    dataType: 'json', //返回值類型  
                    success: function (data, status)  //服務器成功響應處理函數
                    {
                        $("#imgAsp").attr("src", data.imgurl);
                        if (typeof (data.error) != 'undefined') {
                            if (data.error != '') {
                                alert(data.error);
                            } else {
                                alert(data.msg);
                            }
                        }
                    },
                    error: function (data, status, e)//服務器響應失敗處理函數
                    {
                        alert(e);
                    }

                });


            });
        });
        function ChImages(obj) {
            
            $("#img1").attr("src", obj.value)
        }
    </script>
</head>
<body>
    <div>
        <h3>mvc-ajax</h3>
        <input type="file" id="Img" name="file" onchange="ChImages(this)" /> @*注意：name必定要寫*@
        <button id="butLoad">上傳</button>
        <img src="" id="img1" alt="請選擇圖片" width="200" />
    </div>
    <div>
        <h3>asp.net-ajax</h3>
        <input type="file" id="ImgAsp" name="file" /> @*注意：name必定要寫*@
        <button id="butLoadAsp">上傳</button>
        <img src="" id="imgAsp" alt="請選擇圖片" width="200" />
    </div>
</body>
</html>

mvc 控制中代碼html

[HttpPost]//過濾
        public JsonResult UpLoad()
        {


            HttpFileCollectionBase files = Request.Files;//這裏只能用<input type="file" />纔能有效果,由於服務器控件是HttpInputFile類型  
            object result = new { error="error", msg="上傳失敗",imgurl= files[0].FileName};
            string msg = string.Empty;
            string error = string.Empty;
            string imgurl;
            if (files.Count > 0)
            {
                string savePath = Server.MapPath("/") + "UpLoadImg\\";//保存文件地址
                //string saveDir = System.Web.HttpContext.Current.Server.MapPath(savePath);
                if (!Directory.Exists(savePath)) {
                    Directory.CreateDirectory(savePath);
                }
                files[0].SaveAs(savePath + System.IO.Path.GetFileName(files[0].FileName));
                msg = " 成功! 文件大小爲:" + files[0].ContentLength;
                imgurl = "../UpLoadImg/" + files[0].FileName;
                result =new { error="success", msg= msg, imgurl=imgurl };
            }
            return Json(result, "text/html");
        }

aspx.cs 代碼java

public partial class UpLoad : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            string action = Request["__Action"];
            if (action==null || action == string.Empty)
                return;
            Page p = this;
            Type pageType = p.GetType();
            MethodInfo method = pageType.GetMethod(action);
            if (method != null)
                method.Invoke(p, null);
        }
        public void UpLoadImg()
        {
            HttpFileCollection files = Request.Files;//這裏只能用<input type="file" />纔能有效果,由於服務器控件是HttpInputFile類型  
          //  object result = new { error = "error", msg = "上傳失敗", imgurl = files[0].FileName };
            string result = "{ error:'error', msg:'上傳失敗',imgurl:'" + files[0].FileName + "'}";
            string msg = string.Empty;
            string error = string.Empty;
            string imgurl;
            if (files.Count > 0)
            {
                string savePath = Server.MapPath("/") + "UpLoadImg\\";//保存文件地址
                //string saveDir = System.Web.HttpContext.Current.Server.MapPath(savePath);
                if (!Directory.Exists(savePath))
                {
                    Directory.CreateDirectory(savePath);
                }
                files[0].SaveAs(savePath + System.IO.Path.GetFileName(files[0].FileName));
                msg = " 成功! 文件大小爲:" + files[0].ContentLength;
                imgurl = "../UpLoadImg/" + files[0].FileName;
                result = "{ error:'" + error + "', msg:'" + msg + "',imgurl:'" + imgurl + "'}";
            }
            Response.Clear();
            Response.Write(result.ToString());
            Response.End();

        }
    }