1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>HTML5 Upload</title> 6 <style type="text/css"> 7 #destination{ 8 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(true,sizingMethod=scale); 9 } 10 </style> 11 12 <!--<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>--> 13 <script type="text/javascript" src="http://localhost/jQuery/jquery.js"></script> 14 <script type="text/javascript"> 15 //处理file input加载的图片文件 16 $(document).ready(function(e) { 17 //判断浏览器是否有FileReader接口 18 if(typeof FileReader =='undefined') 19 { 20 $("#destination").css({'background':'none'}).html('亲,您的浏览器还不支持HTML5的FileReader接口,无法使用图片本地预览,请更新浏览器获得最好体验'); 21 //如果浏览器是ie 22 if($.browser.msie===true) 23 { 24 //ie6直接用file input的value值本地预览 25 if($.browser.version==6) 26 { 27 $("#imgUpload").change(function(event){ 28 //ie6下怎么做图片格式判断? 29 var src = event.target.value; 30 //var src = document.selection.createRange().text; //选中后 selection对象就产生了 这个对象只适合ie 31 var img = '<img src="'+src+'" width="200px" height="200px" />'; 32 $("#destination").empty().append(img); 33 }); 34 } 35 //ie7,8使用滤镜本地预览 36 else if($.browser.version==7 || $.browser.version==8) 37 { 38 $("#imgUpload").change(function(event){ 39 $(event.target).select(); 40 var src = document.selection.createRange().text; 41 var dom = document.getElementById('destination'); 42 //使用滤镜 成功率高 43 dom.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src= src; 44 dom.innerHTML = ''; 45 //使用和ie6相同的方式 设置src为绝对路径的方式 有些图片无法显示 效果没有使用滤镜好 46 /*var img = '<img src="'+src+'" width="200px" height="200px" />'; 47 $("#destination").empty().append(img);*/ 48 }); 49 } 50 } 51 //如果是不支持FileReader接口的低版本firefox 可以用getAsDataURL接口 52 else if($.browser.mozilla===true) 53 { 54 $("#imgUpload").change(function(event){ 55 //firefox2.0没有event.target.files这个属性 就像ie6那样使用value值 但是firefox2.0不支持绝对路径嵌入图片 放弃firefox2.0 56 //firefox3.0开始具备event.target.files这个属性 并且开始支持getAsDataURL()这个接口 一直到firefox7.0结束 不过以后都可以用HTML5的FileReader接口了 57 if(event.target.files) 58 { 59 //console.log(event.target.files); 60 for(var i=0;i<event.target.files.length;i++) 61 { 62 var img = '<img src="'+event.target.files.item(i).getAsDataURL()+'" width="200px" height="200px"/>'; 63 $("#destination").empty().append(img); 64 } 65 } 66 else 67 { 68 //console.log(event.target.value); 69 //$("#imgPreview").attr({'src':event.target.value}); 70 } 71 }); 72 } 73 } 74 else 75 { 76 // version 1 77 /*$("#imgUpload").change(function(e){ 78 var file = e.target.files[0]; 79 var fReader = new FileReader(); 80 //console.log(fReader); 81 //console.log(file); 82 fReader.onload=(function(var_file) 83 { 84 return function(e) 85 { 86 $("#imgPreview").attr({'src':e.target.result,'alt':var_file.name}); 87 } 88 })(file); 89 fReader.readAsDataURL(file); 90 });*/ 91 92 //单图上传 version 2 93 /*$("#imgUpload").change(function(e){ 94 var file = e.target.files[0]; 95 var reader = new FileReader(); 96 reader.onload = function(e){ 97 //displayImage($('bd'),e.target.result); 98 //alert('load'); 99 $("#imgPreview").attr({'src':e.target.result}); 100 } 101 reader.readAsDataURL(file); 102 });*/ 103 //多图上传 input file控件里指定multiple属性 e.target是dom类型 104 $("#imgUpload").change(function(e){ 105 for(var i=0;i<e.target.files.length;i++) 106 { 107 var file = e.target.files.item(i); 108 //允许文件MIME类型 也可以在input标签中指定accept属性 109 //console.log(/^image\/.*$/i.test(file.type)); 110 if(!(/^image\/.*$/i.test(file.type))) 111 { 112 continue; //不是图片 就跳出这一次循环 113 } 114 115 //实例化FileReader API 116 var freader = new FileReader(); 117 freader.readAsDataURL(file); 118 freader.onload=function(e) 119 { 120 var img = '<img src="'+e.target.result+'" width="200px" height="200px"/>'; 121 $("#destination").empty().append(img); 122 } 123 } 124 }); 125 126 //处理图片拖拽的代码 127 var destDom = document.getElementById('destination'); 128 destDom.addEventListener('dragover',function(event){ 129 event.stopPropagation(); 130 event.preventDefault(); 131 },false); 132 133 destDom.addEventListener('drop',function(event){ 134 event.stopPropagation(); 135 event.preventDefault(); 136 var img_file = event.dataTransfer.files.item(0); //获取拖拽过来的文件信息 暂时取一个 137 //console.log(event.dataTransfer.files.item(0).type); 138 if(!(/^image\/.*$/.test(img_file.type))) 139 { 140 alert('您还未拖拽任何图片过来,或者您拖拽的不是图片文件'); 141 return false; 142 } 143 fReader = new FileReader(); 144 fReader.readAsDataURL(img_file); 145 fReader.onload = function(event){ 146 destDom.innerHTML=''; 147 destDom.innerHTML = '<img src="'+event.target.result+'" width="200px" height="200px"/>'; 148 }; 149 },false); 150 } 151 }); 152 </script> 153 </head> 154 155 <body> 156 <input type="file" id="imgUpload" name="imgUpload" draggable="true" single/> <!--允许file控件接受的文件类型--> 157 <!--<input type="file" id="imgUpload" name="imgUpload" accept="image/*" multiple/>--> 158 <div id="destination" style="200px;height:200px;border:1px solid #000000;"><img src="nopic.jpg" /></div> 159 </body> 160 </html>