Home Article 移动端上传预览图片

移动端上传预览图片

Source:移动端上传预览图片 Release time:2019-11-09 Author:Mr.赵 Reading volume: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>  

  1. function base64_image_content($base64_image_content,$path){
  2. //匹配出图片的格式
  3. if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_image_content, $result)){
  4. $type = $result[2];
  5. $new_file = $path."/".date('Ymd',time())."/";
  6. if(!file_exists($new_file)){
  7. //检查是否有该文件夹,如果没有就创建,并给予最高权限
  8. mkdir($new_file, 0700);
  9. }
  10. $new_file = $new_file.time().".{$type}";
  11. if (file_put_contents($new_file, base64_decode(str_replace($result[1], '', $base64_image_content)))){
  12. return '/'.$new_file;
  13. }else{
  14. return false;
  15. }
  16. }else{
  17. return false;
  18. }
  
I want to comment
Leave a message
http://boke.zhaozhiqi.top/index.php/
User login
You have not written any reviews yet!
You have commented!
Can only praise once!
You have a collection!