IE FF8.0兼容上传本地图片预览

戒烟戒酒戒编程 2011-11-28 02:38:11

IE上面已经实现，但是FF8.0无法使用document.getElementById("idImg").src = o.files[0].getAsDataURL();此方法获取图片预览的效果，网上搜索一大片，都是只能支持FF3.0的，没办法才求助各位了！！！

...全文

279 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

gengchenhui 2011-11-29

打赏
举报

搞定了？怎么搞定的？本地浏览的话，据我所知（可能我孤陋寡闻），ie8以上版本和ff这种浏览器为了安全着想，都不提供本地浏览了吧？低版本的ie可以，还有可以用滤镜。。。

戒烟戒酒戒编程 2011-11-29

打赏
举报

感谢大家的回答，终于搞定了这个。

孟子E章 2011-11-29

打赏
举报

楼上很对

<script>
function pre(ff) {
document.getElementById("img").src = window.URL.createObjectURL(ff.files[0]);
}
</script>
<input id="File1" type="file" onchange="pre(this)" />
<img id="img" alt="" src="" />

或者这样
<style>
.thumb {
height: 75px;
border: 1px solid #000;
margin: 10px 5px 0 0;
}
</style>

<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>

<script>
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object

// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {

// Only process image files.
if (!f.type.match('image.*')) {
continue;
}

var reader = new FileReader();

// Closure to capture the file information.
reader.onload = (function (theFile) {
return function (e) {
// Render thumbnail.
var span = document.createElement('span');
span.innerHTML = ['<img class="thumb" src="', e.target.result,
'" title="', theFile.name, '"/>'].join('');
document.getElementById('list').insertBefore(span, null);
};
})(f);

// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}

document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>

jq12345c 2011-11-29

打赏
举报

window.URL.createObjectURL(o.files[0]);
FF8.0用这个取

戒烟戒酒戒编程 2011-11-29

打赏
举报

戒烟戒酒戒编程 2011-11-28

打赏
举报

戒烟戒酒戒编程 2011-11-28

打赏
举报

[Quote=引用 3 楼 fjasdlkgh 的回复:]
给你一个我写的例子，我测试过，IE和火狐都可以。
<html>
<head>
<title>js图片上传预览</title>
<script>
function PreviewImage(imgFile)
{
var filextension=imgFile.value.substring(imgFile.value.lastIndexOf("."),imgFile.valu……
[/Quote]
少年，不行啊，你确定用的最新的火狐？？？

fjasdlkgh 2011-11-28

打赏
举报

给你一个我写的例子，我测试过，IE和火狐都可以。
<html>
<head>
<title>js图片上传预览</title>
<script>
function PreviewImage(imgFile)
{
var filextension=imgFile.value.substring(imgFile.value.lastIndexOf("."),imgFile.value.length);
filextension=filextension.toLowerCase();
if ((filextension!='.jpg')&&(filextension!='.gif')&&(filextension!='.jpeg')&&(filextension!='.png')&&(filextension!='.bmp'))
{
alert("对不起，系统仅支持标准格式的照片，请您调整格式后重新上传，谢谢 !");
imgFile.focus();
}
else
{
var path;
if(document.all)//IE
{
imgFile.select();
path = document.selection.createRange().text;
document.getElementById("imgPreview").innerHTML="";
document.getElementById("imgPreview").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\"" + path + "\")";//使用滤镜效果
}
else//FF
{
path = imgFile.files[0].getAsDataURL();
document.getElementById("imgPreview").innerHTML = "<img id='img1' width='120px' height='100px' src='"+path+"'/>";
//document.getElementById("img1").src = path;
}
}
}
</script>
</head>
<body>
<input type="file" onchange='PreviewImage(this)' />
<br />
<div id="imgPreview" style='width:120px; height:100px;'>
<img id="img1" src="" width="120" height="100" />
</div>
</body>
</html>

戒烟戒酒戒编程 2011-11-28