Question

我使用Uploadify / asp.net mvc 3上传图片。是否可以在上传之前显示图像？如果是的话怎么样？

我的uploadcontrol：

<script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/swfobject.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.uploadify.v2.1.0.min.js")"></script>
<input type="file" name="fileInput1" id="fileInput1" />
<span id="result"></span><a href="javascript:$('#fileInput1').uploadifyUpload();">Upload
    File</a> <span id="showimage"></span>
<script type="text/javascript">
    $(document).ready(function () {

        $("#fileInput1").uploadify({
            uploader: '@Url.Content("~/Scripts/uploadify.swf")',
            script: '@Url.Action("Upload", "Home")',
            fileDataName: 'file',
            buttonText: 'File Input 1...',
            multi: false,
            sizeLimit: 1000000,
            simUploadLimit: 1,
            cancelImg: '@Url.Content("~/Scripts/cancel.png")',
            auto: false,
            onError: function (a, b, c, d) {
                if (d.status == 404)
                    alert("Could not find upload script. Use a path relative to: " + "<?= getcwd() ?>");
                else if (d.type === "HTTP") {
                    console.log("error " + d.type + ": " + d.status);
                    alert("error " + d.type + ": " + d.status);
                }
                else if (d.type === "File Size")
                    $("#result").html("file too big");
                //alert(c.name + " " + d.type + " Limit: " + Math.round(d.info / (1024 * 1024)) + "MB");
                else
                    alert("error " + d.type + ": " + d.text);
            },
            onComplete: function (event, queueID, fileObj, response, data) {
                $("#showimage").html("<img src=" + fileObj.filePath + "height='500' width='500'/><br />");
            }
        });


    });

</script>

控制器：

   [HttpPost]
        public ActionResult Upload(HttpPostedFileBase file)
        {
            if (file != null && file.ContentLength > 0)
            {
                var appData = Server.MapPath("~/app_data");
                var filename = Path.Combine(appData, Path.GetFileName(file.FileName));
                file.SaveAs(filename);
            }



           // return Json(file);
           //return name;
           return Json(true);
        }

Answer 1

Afaik你不能这样做（实际上是通过javascript访问本地文件系统），出于安全考虑。

但是，您可以使用此解决方法：选择文件后立即执行“后台”上传，将此文件存储为临时文件，并在客户端显示该文件。当然，只有在足够快的情况下，这似乎只是预览，并且由于可能会增加流量这次往返。

Answer 2

除了@ rouen关于客户端限制的答案之外，您还可以使用HTML 5 File API来实现此目的。这显然只限于现代浏览器，但它可能是一种妥协。它是渐进式增强：使用现代浏览器的客户端可以立即预览和反馈，而使用传统浏览器的客户端必须先上传文件并在之后查看预览（除了有关升级其浏览器的消息，当然应该向所有浏览器显示）。

Answer 3

        [HttpPost]
        public ActionResult Upload(HttpPostedFileBase file)
        {
            if (file != null && file.ContentLength > 0)
            {
                var appData = Server.MapPath("~/app_data");
                var filename = Path.Combine(appData, Path.GetFileName(file.FileName));
                file.SaveAs(filename);
            }


           return Content(filename);
        }

            onComplete: function (event, queueID, fileObj, response, data) {
                $("#showimage").html("<img src=" + response + "height='500' width='500'/><br />");
            }

如何使用Uploadify 2.1.4显示图像？

3 个答案: