ASP.NET MVC 中使用 AjaxFileUpload 插件时，上传图片后不能显示（预览）

浏览数：27 / 时间：2015年06月09日

AjaxFileUpload 插件是一个很简洁很好用的上传文件的插件，可以实现异步上传功能，但是在 ASP.NET MVC中使用时，会出现上传图片后不能正确的显示的问题，经过仔细排查，终于找到原因，解决方法如下：

 uploadHttpData: function (r, type) {

        var data = !type;
       // var data = r;
        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")
        {
            // eval("data = " + data);
            /*++++++++++++++以下为新增代码++++++++++++++++++++++++++*/
            var datastr = r.responseText;
            var newdatastr = datastr.replace("<pre>", "").replace("</pre>", "");
            data = JSON.parse(newdatastr);

            /*+++++++++++++++以上为新增代码++++++++++++++++++++++++++*/

        }
        // evaluate scripts within html
        if (type == "html")
            jQuery("<div>").html(data).evalScripts();

        return data;
    },

View Code

通用封装后的方法：

function fileUpload(requrl,elementid,modelimgid) {
    $("#loading").ajaxStart(function () {
        $(this).show();
    }).ajaxComplete(function () {
        $(this).hide();
    });

    $.ajaxFileUpload(
    {
        url: requrl,
        secureuri: false,
        fileElementId: elementid,
        dataType: ‘json‘,
        data: { name: ‘logan‘, id: ‘id‘ },
        success: function (data, status) {
            if (typeof (data.Type) !== ‘undefined‘) {
                if (data.Type !== ‘success‘) {
                    alert(data.Data);
                } else {
                     //alert("aaa");
                    $(‘#imgshow‘).show();
                    $(‘#imgshow‘).append("<img src=‘" + data.Data + "‘ width=‘100‘ height=‘60‘ />");
                    $("#" + modelimgid).val(data.Data);
                }
            }
        },
        error: function (data, status, e) {
            alert(e);
    }
  }
)
    return false;
}

View Code

View 视图中调用：

       function ajaxFileUpload() {
            var url = "/SkinCategory/UploadFile";
            var elementid = "fileToUpload";
            var filepath = $("#fileToUpload").val();
            var file = $("#fileToUpload");
            //validateImage(file);
            var modelimgid = "Icon";
            return fileUpload(url, elementid, modelimgid);
        }

View Code

        <div class="controls">
            <label> 自定义图标 </label>

            @if (Model != null)
            {
                if (!string.IsNullOrWhiteSpace(Model.Icon))
                {
                    <span> 当前使用的图标</span>
                    <img src="@Model.Icon" class="imghref" alt="自定义图标" />
                    <input type="file" name="fileToUpload" id="fileToUpload" />
                }
            }
            else
            {
                <span>请上传图标</span>
                <input type="file" name="fileToUpload" id="fileToUpload" />
            }

            @Html.HiddenFor(p => p.Icon)
            <button id="buttonUpload" onclick=" return ajaxFileUpload();">
                上传
            </button>

            <img id="loading" src="/Content/img/loading.gif" style="display: none;" />
            <div id="imgshow" style="display: none;">
            </div>

        </div>

View Code

Control 代码：

        public ActionResult UploadFile()
        {
            string savePath = ConfigHelper.GetProConfigString("skinCategory");
            HttpPostedFileBase pfile = Request.Files[0];
            bool success = FileHelper.UploadFile(pfile, ref savePath);
            Message msg = Message.UpLoadFileMessage(success);
            msg.Data = savePath;
            return Json(msg, JsonRequestBehavior.AllowGet);

        }