首页 > Web开发 > 详细

ASP.NET MVC 中使用 AjaxFileUpload 插件时,上传图片后不能显示(预览)

时间:2015-03-22 17:55:00      阅读:355      评论:0      收藏:0      [点我收藏+]

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

        }
View Code

效果:

技术分享

ASP.NET MVC 中使用 AjaxFileUpload 插件时,上传图片后不能显示(预览)

原文:http://www.cnblogs.com/wisdo/p/4357643.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!