版权所有 & 2017
本站内容未经许可，不允许转载本文实例讲述了JS上传图片前实现图片预览效果的方法。分享给大家供大家参考。具体实现方法如下：
&!doctype html public &-//w3c//dtd html
4.01//en& &http://www.w3.org/tr/html4/strict.dtd&&
xmlns=&http://www.w3.org/1999/xhtml&&
http-equiv=&Content-Type& content=&text/ charset=utf-8&
&title&JS上传图片前的图片预览效果&/title&
id=&myfile& type=&file& /&
&img src=&/images/logo.gif&
alt=&Image to be upload.& /&
id=&info&&&/div&
&script type=&text/javascript&&
= document.getElementById('myfile');
var dImg =
document.getElementsByTagName('img')[0];
var dInfo =
document.getElementById('info');
dFile.onchange =
function(){
if(!dFile.value.match(/.jpg|.gif|.png|.bmp/i)){alert('File type
must be: .jpg, .gif, .bmp or .png !');}
if(dFile.files){
dImg.src = dFile.files[0].getAsDataURL();
}else if(dFile.value.indexOf('')
& -1 || dFile.value.indexOf('/') & -1){
dImg.src =
希望本文所述对大家的javascript程序设计有所帮助。
编程开发子分类欢迎您来到网页代码站！
如果您关闭了浏览器的javascript，可能导致页面部分功能无法显示，请开启javascript以便正常浏览本网页。网页代码站()谢谢您的支持！
您的当前位置： >>
>> JS实现的图片上传预览功能
JS实现的图片上传预览功能
分类：&&&时间：&&&点击：&&&关键词：||||
&title&JS实现的图片上传预览功能_网页代码站()&/title&
&input type=&file& id=&fileElem& multiple accept=&image/*&
onchange=&handleFiles(this)&&
&div id=&fileList& style=&width:200height:200&&&/div&
window.URL = window.URL || window.webkitURL;
var fileElem = document.getElementById(&fileElem&),
fileList = document.getElementById(&fileList&);
function handleFiles(obj) {
var files = obj.files,
img = new Image();
if(window.URL){
//File API
alert(files[0].name + &,& + files[0].size + & bytes&);
img.src = window.URL.createObjectURL(files[0]); //创建一个object URL，并不是你的本地路径
img.width = 200;
img.onload = function(e) {
window.URL.revokeObjectURL(this.src); //图片加载后，释放object URL
fileList.appendChild(img);
}else if(window.FileReader){
//opera不支持createObjectURL/revokeObjectURL方法。我们用FileReader对象来处理
var reader = new FileReader();
reader.readAsDataURL(files[0]);
reader.onload = function(e){
alert(files[0].name + &,& +e.total + & bytes&);
img.src = this.
img.width = 200;
fileList.appendChild(img);
obj.select();
obj.blur();
var nfile = document.selection.createRange().
document.selection.empty();
img.width = 200;
img.onload=function(){
alert(nfile+&,&+img.fileSize + & bytes&);
fileList.appendChild(img);
//fileList.style.filter=&progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src='&+nfile+&')&;
&p&&a href=&&&网页代码站&/a& - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！&/p&
Js实现图片上传前的预览功能，主要是使用html5 的 Files API实现，ie可兼容部分功能，在火狐和chrome下正常运行。HTML5的 file input标签支持multiple 和 accept ，前一个属性可控制多文件选择，后一个控制上传的文件类型。预了解更多关于File API的资料，有自己查下。
一、如果您使用的浏览器版本为IE6.0、360浏览器V3.0.8.1版本或者IE的更低版本浏览本页面，建议您升级浏览器至IE7以上，上面的“运行”按钮可能不能用，但您可按以下方式查看。运行代码方式：1、点击“复制”按钮；2、在桌面建立一个txt文档；3、粘贴复制的代码；4、最后把txt的扩展名改为“htm”或“html”；5、完成，打开即可看到效果。二、如果您使用FireFox或者非IE浏览器，建议您使用IE7以上版本。上面的“复制”按钮失效，请您“全选”，以普通方式复制！三、某些代码因需加载完Jquery等之类比较大的JS文件，如果您看不到效果，请您刷新页面！四、某些代码不能完全兼容各浏览器，还请您再次修改才能使用！给您带来的不便！尽请谅解！谢谢您的支持！
Powered by (网页即"web" + 代码即"dm" + "cn" = ) | 最专业的代码下载网站 - 致力为中国站长提供高质量的代码！网站JS代码出错解决办法_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
网站JS代码出错解决办法
上传于||文档简介
&&网站修改后出现JS代码出错提示
你可能喜欢}