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="width:200px;height:200px;border:1px solid #000000;"><img src="nopic.jpg" /></div> 159 </body> 160 </html>