как отобразить изображение с Uploadify 2.1.4? - PullRequest
Новая
       5

как отобразить изображение с Uploadify 2.1.4?

0 голосов
/ 09 ноября 2011

Я использую Uploadify / asp.net mvc 3 для загрузки изображений.Можно ли отобразить изображение перед его загрузкой?если да, то как?

мой контроллер загрузки: 

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

Ответы [ 3 ]

0 голосов
/ 09 ноября 2011

В дополнение к ответу @ rouen об ограничениях на стороне клиента, вы можете использовать HTML 5 File API для достижения этой цели.Это явно ограничивает его только современными браузерами, но это может быть компромиссом.Это прогрессивное усовершенствование: клиенты, использующие современные браузеры, получают немедленный предварительный просмотр и обратную связь, тогда как клиенты, использующие устаревшие браузеры, должны сначала загрузить файл и просмотреть предварительный просмотр (кроме сообщения об обновлении своих браузеров, которое, конечно, должно быть показано всем им).).

0 голосов
/ 01 февраля 2012 
        [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 />");
            }
0 голосов
/ 09 ноября 2011

Afaik, вы не можете сделать это (на самом деле доступ к локальной файловой системе с помощью javascript), из соображений безопасности.

Однако вы можете использовать этот обходной путь: Сразу после выбора файла выполните «фоновую» загрузку, сохраните этот файл как временный, и на стороне клиента покажите из него thumnail ... конечно, это может показаться предварительным просмотром, только если он достаточно быстрый, и существует потенциально увеличенный трафик из-за это туда и обратно.

...