使用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>我已经传到了github上,,地址是:https://github.com/fonglezen/mbUploadImg

主要是解决某些浏览器存在base64编码显示不出图片来,而是blob二进制编码的问题。

预览网址:

“人无完人金无足赤”,只要是人就不会是完美的,

使用HTML5 FILE API上传图片移动端缩略图兼容问题

相关文章:

你感兴趣的文章:

标签云: