Question

怎么简单获取input file 选中的图片，并在一个div的img里面赋值src实现预览？

可以用jquery，但是至少是支持IE8。求最最简单的代码

Answer 1

是只能用前台jquery实现？？？还要实现预览？？？还要兼容IE 7+????

代码如下利用html5实现:几乎兼容所有主流浏览器，当然IE必须是IE 6以上
【jquery代码】
$(function() {
$("#file_upload").change(function() {
var $file = $(this);
var fileObj = $file[0];
var windowURL = window.URL || window.webkitURL;
var dataURL;
var $img = $("#preview");

if(fileObj && fileObj.files && fileObj.files[0]){
dataURL = windowURL.createObjectURL(fileObj.files[0]);
$img.attr('src',dataURL);
}else{
dataURL = $file.val();
var imgObj = document.getElementById("preview");
// 两个坑:
// 1、在设置filter属性时，元素必须已经存在在DOM树中，动态创建的Node，也需要在设置属性前加入到DOM中，先设置属性在加入，无效；
// 2、src属性需要像下面的方式添加，上面的两种方式添加，无效；
imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;

}
});
});
【html代码】：
<input id="file_upload" type="file" />
<div class="image_container">
<img id="preview" width="60" height="60">
</div>

【注】下面所说的只能用flash实现太过时，太不靠谱，上传到后台回传是正解，不过不满足你只能用前台写预览！

追问

确实可行

追答

没任何问题，必须可行！！！！如果没问题，请采纳，算是对我的鼓励！！！

Answer 2

function getObjectURL(file) {
var url = null ; 
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}
$("#imgFile").change(function(){
var objUrl;
if(navigator.userAgent.indexOf("MSIE")>0){
objUrl = this.value;
}else
objUrl = getObjectURL(this.files[0]);
console.log("objUrl = "+objUrl) ;
}) ;

 不客气，说拿不到都是瞎bb

追问

我再测试一下

追答

imgFile是控件的id，objUrl就是图片的url，你报的错没怎么看得懂。。。。

Answer 3

要支持ie8预览图片的话 没有简单的代码, 一般用flash实现 或者先上传后再获取地址. 要是ie9+ 则可以直接用html5实现 简单很多.

追问

愿闻其详

Answer 4

var src=$("#fileID").val();
$("#imageID").attr("src",src);

追问

这样不行的，好像要new Image()，请问你能不能用带有new Image的来做？

追答

那就这样
var src=$("#fileID").val();
var html ="";
$("divID").html(html );

追问

还是不行。。

追答

大概的思路就是这样子了，你可以改成你自己代码试试，毕竟自己的需求自己知道，别人只能给你个建议，或者思路

先取到file控件的值，然后新建一个image 把src的值附上刚才取到的值，不过你得用个事件来促发他。

你看下 image src下的路径有没有值

追问

var src=$("#fileID").val();

alert(src) // 弹出 x:\fakepath\x.png 这个值（我用的谷歌）
然后这个值不能用于的src。。。

Answer 5

引用xpy0928的回答：
是只能用前台jquery实现？？？还要实现预览？？？还要兼容IE 7+????
代码如下利用html5实现:几乎兼容所有主流浏览器，当然IE必须是IE 6以上【jquery代码】$(function() {$("#file_upload").change(function() {var $file = $(this);var fileObj = $file[0];var windowURL = window.URL || window.webkitURL;var dataURL;var $img = $("#preview");if(fileObj && fileObj.files && fileObj.files[0]){dataURL = windowURL.createObjectURL(fileObj.files[0]);$img.attr('src',dataURL);}else{dataURL = $file.val();var imgObj = document.getElementById("preview");// 两个坑:// 1、在设置filter属性时，元素必须已经存在在DOM树中，动态创建的Node，也需要在设置属性前加入到DOM中，先设置属性在加入，无效；// 2、src属性需要像下面的方式添加，上面的两种方式添加，无效；imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;}});});【html代码】：<input id="file_upload" type="file" /><div class="image_container"><img id="preview" width="60" height="60"></div>【注】下面所说的只能用flash实现太过时，太不靠谱，上传到后台回传是正解，不过不满足你只能用前台写预览！

为什么我用这段代码 还是报错啊