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

最新推荐文章于 2021-06-05 01:59:59 发布

fonglezen

最新推荐文章于 2021-06-05 01:59:59 发布

阅读量4.3k

点赞数

分类专栏：前端小思文章标签：图片前端 fileapi javascript html5

本文链接：https://blog.csdn.net/wuweitiandian/article/details/46472017

版权

前端小思专栏收录该内容

43 篇文章 0 订阅

订阅专栏

我什么都不说，上代码：

<!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/