移动端上传图片

windseek

发布于 2018-06-15 16:59:15

1.2K0

发布于 2018-06-15 16:59:15

文章被收录于专栏：杨龙飞前端

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2017-12-15 ，如有侵权请联系 cloudcommunity@tencent.com 删除

html