首页 > 代码库 > ajaxfileupload插件上传图片功能，用MVC和aspx做后台各写了一个案例

ajaxfileupload插件上传图片功能，用MVC和aspx做后台各写了一个案例

2024-09-22 15:57:16   219人阅读

HTML代码 和js 代码

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src=http://www.mamicode.com/"~/js/jquery-1.8.3.min.js"></script>
    <script src=http://www.mamicode.com/"~/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=http://www.mamicode.com/"" 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=http://www.mamicode.com/"" id="imgAsp" alt="请选择图片" width="200" />
    </div>
</body>
</html>

 



mvc 控制中代码

 

[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 代码

 

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();

        }
    }

MVC和aspx 有些不同，MVC获取HttpInputFile 用HttpFileCollectionBase 类，aspx获取HttpInputFile 用HttpFileCollection 类

个人学习，请多多指教

代码：http://files.cnblogs.com/files/BensonHai/UploadImage.rar  本人是用VS2015写的

 

ajaxfileupload插件上传图片功能，用MVC和aspx做后台各写了一个案例


联系
我们