如何使用jquery在Asp.net MVC3中实现文件输入的图像预览

Question

我正在使用Asp.Net MVC和Jquery。 我有一个包含文件输入控件的表单，用于上传图像。我希望在保存到数据库之前预览所选图像。

我使用的代码在这里。

<img id="preview_image" alt="" src="" width="100px" height="120px"/> 
<input type="file" name="user_image" id="user_image" onchange="preview(this);"/> 
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script> 
<script type="text/javascript" language="javascript"> 
    function preview(input) { 
     if (input.files && input.files[0]) { 
      var reader = new FileReader(); 
      reader.onload = function (e) { 
       $('#preview_image') 
        .attr('src', e.target.result) 
        .width(100) 
        .height(120); 
      }; 

      reader.readAsDataURL(input.files[0]); 
     } 
    } 
</script> 

它不适用于Internet Explorer和Safari。因为这些浏览器不支持'FileReader'

有没有其他解决方案没有使用任何Flash插件？在此先感谢

Answer 1

您可以看看这个问题中所述的ActiveX对象FileSystemObject：IE and local file reading。

Answer 2

依靠客户端来做到这一点会让您长期头痛难受。

我的解决方案是使用确认页面，向用户显示他们上传的图像，调整大小并将其存储在临时区域中。当用户点击确认时，将图像保存到数据库。然后，您可以删除图像，或者更可能移动到可以用作缓存的位置。

如果你不想走下确认页面的路线，你可以提交图像的大小并使用ajax从临时区域提交。

最后，数据库中的图像在理论上是好的，但是它们不能很好地扩展，特别是如果它们非常大。我们的策略是制作6个不同版本/大小的上传图像，并将其保存在文件系统中，包括原始图像。这使您可以灵活地使用任何您需要的图像，并使您的数据库更轻。