標籤:
別人寫的一個例子我記下了先,自己測試通過的 是別人分享的頁面,原作者我是不知道了,感謝原作者寫的代碼下面是代碼:全部複製就是例子 <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="//cdn.bootcss.com/jquery/1.8.3/jquery.js"></script> <style type="text/css"> li { width: 100px; height: 100px; float: left; border: 1px solid red; } </style> </head> <body> <input type="file" name="" id="files-list" value="" /> <div id=‘output‘> </div> <div id="progress"> </div></body></html><script type="text/javascript"> var filesList=document.getElementById("files-list"); filesList.onchange=function(ev){ var info="", output=document.getElementById("output"), progress=document.getElementById("progress"), files=ev.srcElement.files, type=‘default‘, reader=new FileReader(); if(/image/.test(files[0].type)){ reader.readAsDataURL(files[0]); console.log(files[0]); type=‘image‘ }else{ // reader.readAsText(files[0]);// type=‘text‘;// console.log(‘請輸入圖片類型‘) } reader.onerror=function(){ output.innerHTML="失敗"+reader.error.code; }; reader.onprogress=function(ev){ if(ev.lengthComputable){ progress.innerHTML=ev.loaded+‘/‘+ev.total; console.log(progress.innerHTML) } }; reader.onload=function(){ var html=‘‘; console.log(reader) switch(type){ case ‘image‘ : html="<img src=\""+reader.result+"\">"; break; case ‘text‘: html=reader.result; break } output.innerHTML=html; } } </script>
js上傳圖片擷取圖片地址,相容蘋果