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

【问题标题】：How to Implement Image Preview for File Input in Asp.net MVC3 using Jquery如何使用 Jquery 在 Asp.net MVC3 中实现文件输入的图像预览
【发布时间】：2013-02-07 03:44:03
【问题描述】：

我正在使用 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 插件的解决方案？提前致谢

【问题讨论】：

标签： jquery asp.net-mvc

【解决方案1】：

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

【讨论】：

【解决方案2】：

长期依赖客户来做这件事会给您带来麻烦和问题。

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

如果您不想走确认页面路线，您可以只提交调整大小的图像并使用 ajax 从临时区域返回。

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

【讨论】：