如何使用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显示图像？

回答

相关问题