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

我正在使用Asp.NETMVC和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>

功能预览（输入）{
if（input.files&&input.files[0]）{
var reader=new FileReader（）；
reader.onload=函数（e）{
$（“#预览_图像”）
.attr（'src'，e.target.result）
.宽度（100）
.身高（120）；
};
reader.readAsDataURL（input.files[0]）；
}
}

它在Internet Explorer和Safari中不起作用。因为这些浏览器不支持“FileReader”

---

有没有其他不使用Flash插件的解决方案？提前感谢

您可以查看ActiveX对象文件系统对象，如本问题所述：。

依赖客户端完成此操作将给您带来长期的头痛和问题

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

如果您不想进入确认页面，您可以只提交图像，调整其大小，然后使用ajax从临时区域返回

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