Question

我正在尝试设计一个模块，我希望在将图像上传到数据库之前向用户显示图像的预览。

我找到了适用于Firefox的解决方案，但不适用于IE和Chrome ...有人可以帮我解决。

这是我的代码： -

     function imageURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function(e) {
                $('#replaceMe').attr('src', e.target.result)
                 .width(100)
                 .height(100);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }

我在文件输入控件的更改事件上调用此函数： -

<input type="file" class="file" onchange="imageURL(this)" />

此外我还尝试过这个url步骤，但它对IE7和8以及Chrome无效。

Answer 1

没有跨平台方法可以仅使用HTML / JavaScript来实现此目的。但是，可以使用非常基本的编程方法：

第1步：绑定到模糊
将“模糊”事件绑定到文件输入字段，如下所示：

$("#input_field").blur(function(event){
    alert("Blur!");
});

第2步：服务器端缩略图
您将不得不在服务器端应用程序上编写一个小应用程序/路由，它只接受包含在输入文件中的表单，并生成临时输出文件。您甚至可以暂时将filedata存储在数据库中，而不是将单个文件写入磁盘;实施取决于你。当此路由收到请求时，它应缩略图像，然后返回该缩略图的路径

第3步：AJAX
首先，选择一个many可用的jQuery“AJAX上传”库，使包含文件的表单通过AJAX上传。将该库应用于表单（对于下面的示例，我将使用ajaxForm。），然后修改模糊：

// AJAX the form
$("#your_form").ajaxForm({
    success: function(response){
        // Insert your returned thumbnail into your DOM.
    }
});

// Modify the blur
$("#input_field").blur(function(event){
    $("#input_field").closest("form").submit();
});

<强>问题：
上述方法会出现问题。制作表单AJAX意味着定期提交它会中断 - 更不用说缩略图路由将与实际表单提交路线不同。使用一些变通办法（例如，有一个辅助隐藏表单，模糊事件将文件上传复制到其上，然后提交它）。

Answer 2

这不适用于除firefox以外的任何其他浏览器，因为您使用的FileReader对象不是js standered，它是一个非常特定于FireFox的类。根据Web标准，浏览器脚本（javascript）不具有读取任何系统资源（文件）内容的安全权限。

在IE中，您可以尝试让一些ActiveXObject（FileSystemObject）帮助访问文件系统内容。

Answer 3

没有跨浏览器解决方案（即使FileReader需要Firefox中的某些权限），只有ie和firefox的一些解决方法。

您应该采用传统方式，将图像上传到临时文件并根据用户确认删除/保存

希望这有帮助

Answer 4

根据When can I use...，Firefox 3.6 +，Chrome 9 +，Opera 11.1+（以及Safari 6）支持File API。

如果你真的需要在IE中使用它，你可能想在Flash中构建一个文件上传器。

Answer 5

我同意已经回答的那些说话者 - 本地文件不受设计的限制。

但是，如果您真的致力于此预览 - 上传前功能，并且愿意包含一些颠簸的用户体验，则可能会绕过本地/服务器问题并且... ...

...使用随附的AIR应用程序处理您的网络应用程序的图片上传。

创建一个简单的AIR应用程序，允许用户选择本地图像并以缩略图形式显示它们而不上传它们。

您可以检查用户是否安装了应用，此时您可以提示他们安装或启动它（如果已安装）（请参阅here for more on that）。您可以允许他们选择退出并使用没有缩略图预览的后备上传系统。

选择并审核图像（甚至调整大小或以其他方式处理）后，AIR应用程序可以直接将它们上传到您的服务器。

这是疯了，我知道，可能不适合你的技能组合或期望（基于这个问题上的标签），但我认为它会起作用。

Answer 6

使用jQuery ajax解决您的问题。

$.ajax({
    type: "post",
    url: "serverURL?randomParam="+(Math.random() * 1000),
    cache: false,               
    data: null,
    success: function(json){
        try{            
            var obj = JSON.parse(json);                                             
            if(obj[0].IMAGE!=null){                             
                $("#captchaImage").attr("src", obj[0].IMAGE); 
            }               
        }catch(e) {     
            showMessage("E1");  
        }
    },
    error: function(){
    }
});

Answer 7

尝试使用IE＆lt; 10：

<style type="text/css">
#imgPreview {
    width:320px;
    height:280px;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
}
</style>

<h2>Preview images for MS-IE &lt; 10</h2>
<form id="form1" runat="server">
        <input type="file" onchange='document.getElementById("imgPreview").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src=this.value' />
        <div id="imgPreview"></div>
</form>

小提琴：http://jsfiddle.net/Sme2L/5/

在IE和Chrome上传之前的图像预览

7 个答案: