您现在的位置是:首页 > 电脑技术查询 > web开发

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

编辑:chaxungu时间:2022-10-10 23:23:35分类:web开发

使用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二进制编码的问题。

预览网址:http://www.fonglezen.com/project/mbUploadImg/