大佬教程收集整理的这篇文章主要介绍了使用HTML5 FILE API上传图片移动端缩略图兼容问题，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
<!DOCTYPE html> <html> <head> <title>pc和手机端的图片上传处理</title> <Meta charset="utf-8" /> <Meta name="viewport" content="width=device-width" /> </head> <body> <p>选择:</p> <p><input type="file" accept="image/*" id="upload" name="upload"></p> <div><button id="surebtn">确定上传</button></div> <p>图片预览：</p> <p id="preview"></p> <script type="text/javascript"> var upload = document.getElementById('upload'),preview = document.getElementById('preview'),surebtn = document.getElementById('surebtn'),imgurl = ''; upload.addEventListener('change',handleFile,falsE); surebtn.addEventListener('click',upLoadFile,falsE); function handleFile(){ window.URL = window.URL || window.webkitURL; var sUserAgent= navigator.userAgent.toLowerCase(); var SELEcted_file = upload.files[0]; if(sUserAgent.match(/android/i) == "android"){ var img = new Image(); img.src = window.URl.createObjectURL(SELEcted_filE); preview.innerHTML = ''; preview.appendChild(img); var reader = new FileReader(); reader.onload = function(E) { imgurl = e.target.result; }; reader.readAsDataURL(SELEcted_filE); }else{ //判断文件类型是否为图片 var imageType = /image.*/; if (!SELEcted_file.type.match(imageTypE)) { return false; } var img = document.createElement('img'); img.file = SELEcted_file; preview.innerHTML = ''; preview.appendChild(img); img.onload = function(){ imgurl = img.src; } var reader = new FileReader(); reader.onload = function(E) { img.src = e.target.result; }; reader.readAsDataURL(SELEcted_filE); } } function upLoadFile(){ var start = imgurl.indexOf(',')+1; dataurl = imgurl.substr(start); var xmlhttp = new XMLhttprequest(); xmlhttp.open('post','todo.PHP',truE); xmlhttp.setrequestHeader('Content-Type','application/x-www-form-urlencoded;charset=utf-8'); xmlhttp.setrequestHeader('X_requested-With','XMLhttprequest'); xmlhttp.send('dataurl='+encodeURIComponent(dataurl)); xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200){ console.log(xmlhttp.responseText) } } } </script> </body> </html>
@H_262_5@
以上是大佬教程为你收集整理的使用HTML5 FILE API上传图片移动端缩略图兼容问题全部内容，希望文章能够帮你解决使用HTML5 FILE API上传图片移动端缩略图兼容问题所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。