javascript 在 IE 和 Chrome 中上传前的图像预览
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5854035/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Image preview before upload in IE and Chrome
提问by abhijit
I am trying to design a module in which I would like to show a preview of the image to the user before he uploads the image to database.
我正在尝试设计一个模块，在该模块中我想在用户将图像上传到数据库之前向用户显示图像的预览。
I have found a solution which works for Firefox but is not working for IE and Chrome...Can someone help me out.
我找到了一个适用于 Firefox 但不适用于 IE 和 Chrome 的解决方案......有人可以帮助我。
Here is my code:-
这是我的代码：-
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]);
}
}
And I am calling this function on change event of the file input control:-
我在文件输入控件的更改事件上调用此函数：-
<input type="file" class="file" onchange="imageURL(this)" />
And also I have tried this urlsteps but it doesnt work for IE7 and 8 and Chrome.
而且我也尝试过这个url步骤，但它不适用于 IE7 和 8 以及 Chrome。
采纳答案by Mike Trpcic
There is no cross platform way to accomplish this using only HTML/JavaScript. It is possible, however, using a very basic programmatic approach:
没有跨平台的方法可以仅使用 HTML/JavaScript 来完成此操作。但是，可以使用非常基本的编程方法：
Step 1: Binding to Blur
Bind a "blur" event to your file input field, like so:
第 1 步：绑定到模糊
将“模糊”事件绑定到您的文件输入字段，如下所示：
$("#input_field").blur(function(event){
alert("Blur!");
});
Step 2: Server-Side Thumbnailing
You're going to have to write a small application/route on your server side application that simply accepts a form that contains in input file, and generates a temporary output file. You could even just temporarily store the filedata in your database, rather than write individual files to disk; the implementation is up to you. When this route receives a request, it should thumbnail the image, and then return a path to that thumbnail
第 2 步：服务器端缩略图
您将不得不在服务器端应用程序上编写一个小应用程序/路由，它只接受包含在输入文件中的表单，并生成一个临时输出文件。您甚至可以将文件数据临时存储在数据库中，而不是将单个文件写入磁盘；实施取决于您。当此路由收到请求时，它应该缩略图图像，然后返回该缩略图的路径
Step 3: AJAX
First, choose one of the manyavailable jQuery "AJAX Upload" libraries to make the form that contains your file upload it via AJAX. Apply that library to the form(For the examples below, I'll use ajaxForm.), and then modify your blur:
第 3 步：AJAX
首先，选择许多可用的 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();
});
Issues:
There will be issues with the approach above. Making your form AJAX will mean submitting it regularly will break - not to mention that the thumbnail route will be different than the actual form submission route. Use some workarounds (for example, have a secondary hidden form, and the blur event copies the file-upload onto it, and then submits it).
问题：
上述方法会出现问题。使您的表单 AJAX 将意味着定期提交它会中断 - 更不用说缩略图路线将与实际的表单提交路线不同。使用一些解决方法（例如，有一个二级隐藏表单，模糊事件将文件上传复制到它上面，然后提交它）。
回答by Arun P Johny
This will not work in any other browser other than firefox because the FileReader object you are using is not a js standered, it is a class very specific to FireFox. As per web standard browser scripts(javascript) will not have security permission to read contents of any system resources(files).
这在 firefox 以外的任何其他浏览器中都不起作用，因为您使用的 FileReader 对象不是 js 标准的，它是一个非常特定于 FireFox 的类。根据 Web 标准浏览器脚本（javascript）将没有读取任何系统资源（文件）内容的安全权限。
In IE you can try to get some ActiveXObject(FileSystemObject) help access the file system contents.
在 IE 中，您可以尝试获取一些 ActiveXObject( FileSystemObject) 帮助访问文件系统内容。
回答by Edgar Villegas Alvarado
There's no cross-browser solution (even FileReaderneeds certain permissions in Firefox), only some workarounds for ie and firefox.
没有跨浏览器的解决方案（甚至FileReader需要在 Firefox 中获得某些权限），只有 ie 和 firefox 的一些解决方法。
You should do the conventional way, upload the image to a temp file and delete/save it depending on user confirmation
您应该按照常规方式将图像上传到临时文件并根据用户确认将其删除/保存
Hope this helps
希望这可以帮助
回答by Jeffery To
According to When can I use..., the File API is supported in Firefox 3.6+, Chrome 9+, Opera 11.1+ (and Safari 6).
根据我何时可以使用...，Firefox 3.6+、Chrome 9+、Opera 11.1+（和 Safari 6）支持 File API。
If you really need this in IE, you may want to build a file uploader in Flash.
如果您真的需要在 IE 中使用它，您可能需要在 Flash 中构建一个文件上传器。
回答by peteorpeter
I concur with the nay-sayers who have already answered - local files are off limits by design.
我同意那些已经回答过的反对者的看法——本地文件在设计上是不受限制的。
But, if you are reallycommitted to this preview-before-upload feature, and willing to include some bumpy UX, you might circumvent the local/server question and...
但是，如果您真的致力于此上传前预览功能，并愿意包含一些颠簸的用户体验，您可能会绕过本地/服务器问题并...
...use an accompanying AIR application to handle image uploading for your web app.
...使用随附的 AIR 应用程序处理 Web 应用程序的图像上传。
Create a simple AIR application that allow users to select local images and displays them in thumbnails without uploading them.
You can check to see if user's have the app installed, at which point you can prompt them to install or launch it if it's already installed (see here for more on that). You could allow them to opt out and use a fallback upload system without thumbnail previews as well.
Once the images are selected and reviewed (or even resized or otherwise processed), the AIR app could upload them to your server directly.
创建一个简单的 AIR 应用程序，允许用户选择本地图像并以缩略图形式显示它们，而无需上传它们。
您可以检查用户是否安装了该应用程序，此时您可以提示他们安装或启动它（如果它已经安装）（有关更多信息，请参见此处）。您可以允许他们选择退出并使用没有缩略图预览的后备上传系统。
一旦选择并查看图像（甚至调整大小或以其他方式处理），AIR 应用程序就可以将它们直接上传到您的服务器。
It's insane, I know, and probably doesn't fit your skill-set or expectations (based on the tags on this question) but I think it would work.
我知道这很疯狂，并且可能不符合您的技能或期望（基于此问题上的标签），但我认为它会起作用。
回答by Vicky
Use jQuery ajax to solve your problem.
使用 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(){
}
});
回答by berniecc
Try this for IE < 10:
为 IE < 10 试试这个：
<style type="text/css">
#imgPreview {
width:320px;
height:280px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
}
</style>
<h2>Preview images for MS-IE < 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>
Fiddle: http://jsfiddle.net/Sme2L/5/
