zoukankan      html  css  js  c++  java
  • ASP.NET MVC 中使用 AjaxFileUpload 插件时,上传图片后不能显示(预览)

    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

    效果:

  • 相关阅读:
    中国大概能用的NTPserver地址
    在asp.net mvc中使用PartialView返回部分HTML段
    我的学习笔记_Windows_HOOK编程 2009-12-03 11:19
    素数推断算法(高效率)
    No matching code signing identity found
    Android Bundle类
    D3D 练习小框架
    Python标准库:内置函数dict(iterable, **kwarg)
    微凉大大,教你一步一步在linux中正确的安装Xcache加速php。
    背景图片定位
  • 原文地址:https://www.cnblogs.com/wisdo/p/4357643.html
Copyright © 2011-2022 走看看