ie8测试始终不支持，非ie方法一、二都正常
1 <!DOCTYPE html> 2 <html lang="zh"> 3 4 <head> 5 <meta charset="UTF-8" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge" /> 8 <title>Document</title> 9 <style type="text/css"> 10 img { 11 width: 200px; 12 height: 100px; 13 } 14 .m-top{ 15 margin-top: 10px; 16 } 17 </style> 18 <script type="text/javascript"> 19 function PreviewImage(file) { 20 var filextension = file.value.substring(file.value.lastIndexOf("."), file.value.length); 21 filextension = filextension.toLowerCase(); 22 if((filextension != '.jpg') && (filextension != '.gif') && (filextension != '.jpeg') && (filextension != '.png') && (filextension != '.bmp')) { 23 alert("对不起，系统仅支持标准格式的照片，请您调整格式后重新上传，谢谢 !"); 24 file.focus(); 25 } else { 26 var url; 27 if (file.files && file.files[0]){ 28 /* 29 // 方法一：FileReader API实现本地图片预览 30 var file = file.files[0]; 31 //创建一个FileReader对象 32 var reader = new FileReader(); 33 //读取file文件； 34 reader.readAsDataURL(file); 35 //当文件读取成功后，将结果保存到url变量里； 36 reader.onload = function(evt) { 37 url = evt.target.result; 38 document.getElementById('img').src = url; 39 } 40 */ 41 //url = file.files[0].getAsDataURL();// FF 3.0 42 //document.getElementById("img").src = url; 43 44 45 // 方法二：HTML5 URL API 46 url=window.URL.createObjectURL(file.files[0]);// FF 7.0以上 47 document.getElementById("imgPreview").innerHTML = "<img id='img' src='"+url+"'/>"; 48 49 } else { 50 // 兼容IE9及以下 51 //获取上传文件控件的值； 52 file.select(); 53 url = document.selection.createRange().text; 54 document.getElementById("imgPreview").innerHTML=""; 55 document.getElementById("imgPreview").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src="" + url + "")";//使用滤镜效果 56 } 57 } 58 } 59 </script> 60 </head> 61 62 <body> 63 <input id="fileItem" type="file" onchange='PreviewImage(this)' /> 64 <div id="imgPreview" class="m-top" style='200px; height:100px;'> 65 <img src="" id="img" alt="pic" /> 66 </div> 67 </body> 68 69 </html>