ASP.NET MVC+ajaxfileupload实现图片异步上传

问题:例如用户注册的时候,我们想通过异步上传图片或者文字等信息,图片需要额外的发送,这样就需要用到ajaxfileupload.js插件了

说明:只附载主要代码

使用之前附载Jquryajaxfileupload源码(Jqury版本好像没有多大要求,版主为jquery-3.3.1.js)

关于源码问题:ajaxfileupload如果是在ASP.NET 上运行 强烈建议用版主推荐的(版主之前入了别人的坑,找了一晚上没找到错,没有执行success和erro)

http://files.cnblogs.com/files/kissdodog/ajaxfileupload_JS_File.rar

感谢逆心博主:http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html(如果我写的不好可以借鉴)


1.前台: 

<input            id="file_upload" type="file" name="file_upload" onchange="document.getElementById('txt_PhotoUrl').value = this.value" class="hidden"/>

2.Js代码:

$.ajaxFileUpload({

                    url: '/Users/UpLoadFile',                                 //用于文件上传的服务器端请求地址
                    secureuri: false,                                                //是否需要安全协议,一般设置为false
                    fileElementId: 'file_upload',                             //文件上传域的ID
                    dataType: 'json',                                             //返回值类型 一般设置为json
                    success: function (data, status)  //服务器成功响应处理函数
                    {
                        if (status == "success") {
                            //文件上传成功
                            //修改文件位置
                            postdata.Photo = data.urlPath;
                            //文件上传成功后上传其他数据如用户名,密码等数据
                            $.ajax({
                                type: "post",
                                url: "/Users/" + sendName,
                                data: postdata,
                                dataType: "json",
                                success: function (data, status) {
                                    if (status == "success") {
                                       alert("文件上传成功!"); 
                                    }
                                },
                                error: function () {
                                    alert("出错了!");
                                },
                                complete: function () {
                                    alert("一次处理完成!");
                                }

                            });
                        }
                       
                    },
                    error: function ()//服务器响应失败处理函数
                    {
                        alert("文件上传失败,请检查后重试");
                    }
                });

            }

3.后台代码:(测试用的,没有写具体的文件名重复判断)

         /// <summary>
        /// 文件上传
        /// </summary>
        /// <returns></returns>
        public JsonResult UpLoadFile()
        {
            HttpFileCollection files = System.Web.HttpContext.Current.Request.Files;
            string filePath = files[0].FileName;
            string filename = filePath.Substring(filePath.LastIndexOf("\\") + 1);
            //存到服务器的地址
            string serverpath = Server.MapPath(@"\Image\Users\") + filename;
            //取出图片的位置
            string relativepath = @"/Image/Users/" + filename;
            //保存图片
            files[0].SaveAs(serverpath);
            filePath = files[0].FileName;
            //返回图片的相对位置 relativepath
            return Json(new { urlPath = relativepath }, JsonRequestBehavior.AllowGet);

           }

4.效果展示:

1.点击添加图片

ASP.NET MVC+ajaxfileupload实现图片异步上传

2.提交的数据

ASP.NET MVC+ajaxfileupload实现图片异步上传

3.后台读取图片上传成功:


ASP.NET MVC+ajaxfileupload实现图片异步上传

5.之前遇到的问题(博主之前遇到不执行success和erro)

1.解决方法


uploadHttpData: function (r, type) {
        var data = !type;
        data = type == "xml" || data ? r.responseXML : r.responseText;
        // If the type is "script", eval it in global context
        if (type == "script")
            jQuery.globalEval(data);
        // Get the JavaScript object, if JSON is used.
        if (type == "json")
            data = jQuery.parseJSON(jQuery(data).text());
            //eval("data = \"" + data + "\"");
        // evaluate scripts within html
        if (type == "html")
            jQuery("<div>").html(data).evalScripts();

        return data;

    },

方法中 eval("data = \"" + data + "\""); 改为data = jQuery.parseJSON(jQuery(data).text());

        if (type == "json")
            data = jQuery.parseJSON(jQuery(data).text());

            //eval("data = \"" + data + "\"");

但是我测试了没用(害的我找了一晚上没找出来),建议用博主推荐的源码地址

http://files.cnblogs.com/files/kissdodog/ajaxfileupload_JS_File.rar