移动端上传图片

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>pc和手机端的图片上传处理</title>  
  5.     <meta charset="utf-8" />  
  6.     <meta name="viewport" content="width=device-width" />  
  7. </head>  
  8. <body>  
  9.     <p>选择:</p>  
  10.     <p><input type="file" accept="image/*" id="upload" name="upload"></p>  
  11.     <div><button id="surebtn">确定上传</button></div>  
  12.     <p>图片预览：</p>  
  13.     <p id="preview"></p>  
  14.     <script type="text/javascript">  
  15.   
  16.         var upload = document.getElementById('upload'),  
  17.             preview = document.getElementById('preview'),  
  18.             surebtn = document.getElementById('surebtn'),  
  19.             imgurl = '';  
  20.   
  21.         upload.addEventListener('change',handleFile,false);  
  22.         surebtn.addEventListener('click',upLoadFile,false);  
  23.   
  24.         function handleFile(){  
  25.             window.URL = window.URL || window.webkitURL;  
  26.             var sUserAgent= navigator.userAgent.toLowerCase();  
  27.             var selected_file = upload.files[0];  
  28.   
  29.             if(sUserAgent.match(/android/i) == "android"){  
  30.                 var img = new Image();  
  31.                 img.src = window.URL.createObjectURL(selected_file);  
  32.                 preview.innerHTML = '';  
  33.                 preview.appendChild(img);  
  34.   
  35.   
  36.                 var reader = new FileReader();  
  37.                 reader.onload = function(e) { imgurl = e.target.result; };  
  38.                 reader.readAsDataURL(selected_file);  
  39.   
  40.             }else{  
  41.   
  42.                 //判断文件类型是否为图片  
  43.                  var imageType = /image.*/;  
  44.           
  45.                 if (!selected_file.type.match(imageType)) {  
  46.                   return false;  
  47.                 }  
  48.   
  49.                 var img = document.createElement('img');  
  50.                 img.file = selected_file;  
  51.                 preview.innerHTML = '';  
  52.                 preview.appendChild(img);  
  53.   
  54.                 img.onload = function(){  
  55.                     imgurl = img.src;  
  56.                 }  
  57.   
  58.                 var reader = new FileReader();  
  59.                 reader.onload = function(e) { img.src = e.target.result; };  
  60.                 reader.readAsDataURL(selected_file);  
  61.             }  
  62.         }  
  63.   
  64.         function upLoadFile(){  
  65.             var start = imgurl.indexOf(',')+1;  
  66.             dataurl = imgurl.substr(start);  
  67.   
  68.             var xmlhttp = new XMLHttpRequest();  
  69.             xmlhttp.open('post','todo.php',true);  
  70.             xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset=utf-8');  
  71.             xmlhttp.setRequestHeader('X_Requested-With','XMLHttpRequest');  
  72.             xmlhttp.send('dataurl='+encodeURIComponent(dataurl));  
  73.   
  74.             xmlhttp.onreadystatechange=function(){  
  75.                 if (xmlhttp.readyState==4 && xmlhttp.status==200){  
  76.                     console.log(xmlhttp.responseText)  
  77.                 }  
  78.             }  
  79.         }  
  80.   
  81.     </script>  
  82. </body>  
  83. </html>  

posted on 2017-12-15 16:49  杨龙飞  阅读(183)  评论(0)  编辑  收藏  举报

导航

Fork me on GitHub