Uploadify 2.1.4で画像を表示する方法は？

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

クライアント側の制限についての@ rouenの回答に加えて、これを実現するにはHTML 5 File APIを使用することができます。これは明らかに現代のブラウザーにしか制限されませんが、妥協である可能性があります。プログレッシブ・エンハンスメント：最新のブラウザを使用しているクライアントはすぐにプレビューとフィードバックを得ますが、従来のブラウザを使用しているクライアントは、最初にファイルをアップロードしてからプレビューを表示する必要があります（もちろん、ブラウザをアップグレードする）。

Answer 2

あなたはセキュリティ上の理由から、（実際にはjavascriptをして、ローカルのファイルシステムにアクセスする）これを行うカント私の知る限り。 ファイルを選択した直後に、「バックグラウンド」アップロードを実行し、このファイルを一時的に保存し、クライアント側でthumnailを表示します。もちろん、これはプレビューのように見えますこの往復のためにトラフィックが増加する可能性があります。

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