图片上传总结

            这段时间一直在研究的图片上传，自己也尝试做了一下，这边和大家分享一下成果。当然有些问题还未解决，希望有大神来完善下。

        移动端图片上传要完成的功能：1.调用手机相册选择图片（多张图片上传）

                                                           2.图片上传要进行压缩（我用的是localResizeIMG插件压缩）

                                                           3.压缩图片上传（ajax）

                                                           4.后台接受（我的php写的）

        一步一步来说，首先是调用手机相册选择多张图片。以前要做到这件事需要调用插件来完成，H5出现以后就带来一种方便的方法<input type="file" multiple>这样就轻松解决多图上传。本来这是一种很愉快的方法，但是在移动端andorido一些版本不支持multiple属性，这个问题纠结了很久但是还是没能很好的解决，各种百度也是只有问题没有解决方案，有大神知道的可以分享下。虽然在andorid系统上碰壁，但是在ios还有pc上还是很好支持的。

        图片localResizeIMG压缩，这边就是用到了localResizeIMG插件来实现，插件里面的功能已经很完善了，直接拿来用就行。不过这个插件不怎么好找。

        图片上传。图片压缩后就转化为base64编码的形式了，我们要做的就是将图片信息传到服务器端

         ajax传值方法（我用的是XMLHttpRequest来传值）：

 var xhr = new XMLHttpRequest();
                var data = {
                    base64: results.base64,
                    size: results.base64.length, // 校验用，防止未完整接收
                };
				
                xhr.open('POST', 后台路径);
                xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        var result = JSON.parse(xhr.response);
                        result.error
                            ? alert('服务端错误，未能保存图片')
                            //: demo_report('服务端实存的图片', result.src, result.size);
							: alert('上传OK'); 
                    }
                };
                xhr.send(JSON.stringify(data)); // 发送base64

         最后一步就是接收了，这个没什么好说的，熟悉ajax与php信息的交互就行了

<?php

$base64=file_get_contents("php://input"); //获取输入流
$base64=json_decode($base64,1);
$data = $base64['base64'];
preg_match("/data:image\/(.*);base64,/",$data,$res);
$ext = $res[1];
if(!in_array($ext,array("jpg","jpeg","png","gif"))){
	echo json_encode(array("error"=>1));die;
}
$file=time().'.'.$ext;
$data = preg_replace("/data:image\/(.*);base64,/","",$data);
if (file_put_contents($file,base64_decode($data))===false) {
	echo json_encode(array("error"=>1));
}else{
	echo json_encode(array("error"=>0));
}

?>

           我的图片上传的思路大致就是这样了，在文章的最后附上上传部分的代码。

   <div class="send">
       <input type="file"  id="file" name="file" multiple />
        <input type="submit" value="上传" onClick="send();" >
  </div>
</div>
  <script>
    function send(){
		//alert("2345");
	  var input = document.querySelector('#file');
		for(var i = 0, ilen = input.files.length; i < ilen; i++){	
		lrz(input.files[i], {width: 400}, function (results) {
		    	sleep(900);//程序停止时间
			//alert("flag");
		  // 你需要的数据都在这里，可以以字符串的形式传送base64给服务端转存为图片。
		     console.log(results); 
             
		         // 发送到后端
                var xhr = new XMLHttpRequest();
                var data = {
                    base64: results.base64,
                    size: results.base64.length, // 校验用，防止未完整接收
                };
                xhr.open('POST', 'uploade.php');
                xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        var result = JSON.parse(xhr.response);
                        result.error
                            ? alert('服务端错误，未能保存图片')
                            //: demo_report('服务端实存的图片', result.src, result.size);
							: alert('上传OK'); 
                    }
                };
                xhr.send(JSON.stringify(data)); // 发送base64
		});
		}
	//}
	}
  function sleep(numberMillis) {
      var now = new Date();
      var exitTime = now.getTime() + numberMillis;
      while (true) {
      now = new Date();
      if (now.getTime() > exitTime)
       return;
       }
   }
  
  </script>