实现的效果:单图片上传前预览
兼容性:
火狐:不是太低就成,我用了最近较新的几个版本,都没有问题
IE:暂时就用过IE8、9、10、11
HTML代码:
<body>
<div class="file-box">
<input type='text' name='textfield' id='textfield' class='systext' /> <!--文本框-->
<input type='button' class='but uploadbtn' value='浏览...' /><!--浏览按钮-->
<input type="file" name="applogo" class="file" size="28" οnchange="preview(this);" id="applogo"/> <!--真正的浏览按钮,用来打开上传页面,前面的“浏览”按钮掩盖此按钮,为好看-->
</div>
<br />
<br />
<!--预览区-->
<div id="preview">
<img src="1.jpg" width="297"/> <!--只定义宽度就成,高度浏览器会等比例的自动调节-->
</div>
</body>
样式:
<style type="text/css"> body{ background:none;} #imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}/*这个必须加,为IE*/ .systext{width:238px; height:28px; line-height:28px; float:left; border:1px solid #ccc; } .file-box{ position:relative;width:640px} .uploadbtn{ height:30px; width:60px; margin-left:3px; float:left; } .but { width:102px; height:25px; line-height:24px; margin-bottom: 3px; border:0px; background:#1381c9; color: #fff; cursor:pointer; } .file{ position:absolute; top:0px; left:0px; height:28px; filter:alpha(opacity:0);opacity: 0;width:310px; line-height:28px; } </style>
导入的JQuery文件(用的是1.4.2的):
<script type="text/javascript" src="jquery-1.4.2.js"></script>
JS文件:
<script type="text/javascript"> //预览 function preview(file){ document.getElementById("textfield").value=$(file).val(); //判断当前上传的文件是不是图片文件 if(!(/(?:jpg|gif|png)$/i.test(file.value))){//只判断jpg|gif|png格式,其他的格式可以往后追加 alert("只支持jpg、gif、png的图片"); $(file).val(""); return false; } var prevDiv = document.getElementById("preview");//获取预览区DIV对象 if(file.files && file.files[0]){//火狐系列 prevDiv.innerHTML=""; prevDiv.innerHTML="<img id='imghead' width='297'/>";//浏览器等比例的自动调节 var img = document.getElementById("imghead"); var reader = new FileReader(); reader.onloadend = function(evt){ img.src=evt.target.result; }; reader.readAsDataURL(file.files[0]); }else{//IE系列 var sFilter = 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="'; file.select(); var src = document.selection.createRange().text; prevDiv.innerHTML=""; prevDiv.innerHTML = "<div id='divhead' style='width:297px;height:187px;"+sFilter+src+"\"'></div>";//用style定义的样式,浏览器好像不会自动调节,所以得自定义 } } </script>
以上实现的是单图片的预览,以下是多图片的预览,因为用的是FileReader而IE系列不支持这个,所以不兼容IE。
HTML
<body>
<div class="file-box">
<input type='text' name='textfield' id='textfield' class='systext' /> <!--文本框-->
<input type='button' class='but uploadbtn' value='浏览...' /><!--浏览按钮-->
<input type="file" name="applogo" class="file" size="28" οnchange="preview(this);"
id="applogo" multiple="multiple"/>
<!--真正的浏览按钮,用来打开上传页面,前面的“浏览”按钮掩盖此按钮,为好看-->
</div>
<br />
<br />
<!--预览区-->
<div id="preview"></div>
</body>
Style:
<style type="text/css">
body{ background:none;}
.systext{width:238px; height:28px; line-height:28px; float:left; border:1px solid #ccc; }
.file-box{ position:relative;width:640px}
.uploadbtn{ height:30px; width:60px; margin-left:3px; float:left; }
.but { width:102px; height:25px; line-height:24px; margin-bottom: 3px; border:0px; background:#1381c9; color: #fff; cursor:pointer; }
.file{ position:absolute; top:0px; left:0px; height:28px; filter:alpha(opacity:0);opacity: 0;width:310px; line-height:28px; }
.thumb {border: 1px solid #000; height: 75px; margin: 10px 5px 0 0;}
img {height: auto; max-width: 100%;vertical-align: middle;border: 0 none;}
</style>
导入的JQuery文件(用的是1.4.2的):
<script type="text/javascript" src="jquery-1.4.2.js"></script>
JS:
<script type="text/javascript"> //预览 function preview(file){ //document.getElementById("textfield").value=$(file).val(); var prevDiv = document.getElementById("preview");//获取预览区DIV对象 if(file.files && file.files[0]){//火狐系列 prevDiv.innerHTML=""; for(var i=0;i<file.files.length;i++){ var f=file.files[i]; //判断当前上传的文件是不是图片文件 if(!(/image\/.*/i.test(f.type))){ alert("第"+(i+1)+"个文件不是图片类型"); continue; } var reader = new FileReader(); reader.onload = (function(file) { return function(e) { var span = document.createElement('span'); span.innerHTML = '<img class="thumb" src="'+ this.result +'" title="'+ file.name +'" />'; prevDiv.insertBefore(span, null);//将span添加到预览区 }; })(f); //读取文件内容 reader.readAsDataURL(f); } } } </script>多图片预览功能时参考这里的:http://blog.csdn.net/zhu1988renhui/article/details/7936525,这个链接对FileReader讲的比较详细,还有图片缩放、进度条什么的,大家可以参考参考!