zoukankan      html  css  js  c++  java

  • 移动端上传图片

    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>  
    学而不思则罔，思而不结则殆，结而不看，一事无成
  • 相关阅读:
    Servlet Filter过滤器执行顺序
    eclipse乱码问题
    如何查看servlet&jsp版本？
    Unity的shader学习2
    Unity的shader学习1
    后缀数组专题与代码模板
    哈希表/散列表 指针版模版
    图的连通性专题及模板
    一般图最大匹配--带花树
    7-15至7-17训练赛回顾
  • 原文地址：https://www.cnblogs.com/windseek/p/8043885.html
Copyright © 2011-2022 走看看