如何使用Uploadify 2.1.4顯示圖像？

我正在使用uploadify/asp.net mvc 3上傳圖片。上傳之前可以顯示圖像嗎？如果是的話如何？如何使用Uploadify 2.1.4顯示圖像？

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

來源

2011-11-09 user603007

除了@ rouen的關於客戶端限制的答案，您可以使用HTML 5 File API來實現此目的。這顯然僅限於現代瀏覽器，但它可能是一種妥協。這是漸進式的增強：使用現代瀏覽器的客戶可以立即預覽和反饋，而使用傳統瀏覽器的客戶必須先上傳文件，然後才能看到預覽（除了關於升級瀏覽器的消息，當然應該向所有人顯示））。

來源

2011-11-09 12:09:56

據我所知，你不能這樣做（在事實上的JavaScript訪問本地文件系統），出於安全原因。

然而，你可以使用這個解決方法：選擇文件後，做「背景」上傳，將此文件存儲爲臨時，並在客戶端顯示thumnail從它..當然，這似乎只是預覽，如果它速度足夠快，並且由於此往返行爲而可能會增加流量。

來源

2011-11-09 11:24:02 rouen

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

來源

2012-02-01 12:09:31

如何使用Uploadify 2.1.4顯示圖像？

回答

相關問題