黑帽联盟

标题: php+html5实现无刷新图片上传教程 [打印本页]
作者: yun    时间: 2017-3-14 19:43
标题: php+html5实现无刷新图片上传教程
向大家介绍一种全新的上传图片的方式，利用html5的FileReader读取图片文件，然后将数据传输到服务器再使用PHP进行处理。实现过程如下（带图片预览功能）
前端html代码 upload,html
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5. <title>上传</title>
  6. <script type="text/javascript" src="js/jquery.min.js"></script>
  7. <style>
  8. .upload{
  9.   width:300px;
  10.   height:200px;
  11.   position:relative;
  12. }
  13. .upload input[type='file']{
  14.   position:absolute;
  15.   width:70px;
  16.   top:0;
  17.   left:0;
  18.   z-index:10;
  19.   opacity:0;
  20.   filter:alpha(opacity=0);
  21. }
  22. .upload input.selbutton{
  23.   width:70px;
  24.   height:30px;
  25.   background:#cf001b;
  26.   color:#FFF;
  27.   font-size:14px;
  28.   position:absolute;
  29.   top:0;left:0;
  30.   z-index:9;
  31.   border:none;
  32.   cursor:pointer;
  33. }
  34. .upload input.upbutton{
  35.   width:70px;
  36.   height:30px;
  37.   background:#cf001b;
  38.   color:#FFF;
  39.   font-size:14px;
  40.   position:absolute;
  41.   top:50px;left:0;
  42.   z-index:10;
  43.   border:none;
  44.   cursor:pointer;
  45. }
  46. </style>
  47. </head>
  48. <body>
  49. <div class='upload'>
  50.   <input type="file" name="file" />
  51.   <input type="button" name="selbutton" class="selbutton" value="选择文件" />
  52.   <input type="button" name="upbutton" class="upbutton" value="上传" />
  53. </div>
  54. <div class='previews'>
  55.   <img src="#" class="image_thumb" alt="图片预览"/>
  56. </div>
  57. </body>
  58. </html>
复制代码
样式如下图
2.png
接下来是js代码
  1. <script type="text/javascript">
  2.   $(".upbutton").click(function(){
  3.     //定义允许上传的图片格式 在前台就可以直接判断，不合法的格式将不会上传
  4.    var filetype = ['jpg','jpeg','png','gif'];
  5.    if($('.image').get(0).files){
  6.       fi = $('.image').get(0).files[0]; //得到文件信息
  7.       //判断文件格式是否是图片 如果不是图片则返回false
  8.       var fname = fi.name.split('.');
  9.       if(filetype.indexOf(fname[1].toLowerCase()) == -1){
  10.         alert('文件格式不支持');
  11.         return ;
  12.       }
  13.       //实例化h5的fileReader
  14.       var fr = new FileReader();
  15.       fr.readAsDataURL(fi); //以base64编码格式读取图片文件
  16.       fr.onload = function(frev){
  17.         pic = frev.target.result; //得到结果数据
  18.       //开始上传之前，预览图片
  19. $('.image_thumb').attr('src',pic);
  20. //使用ajax 利用post方式提交数据
  21.         $.post(
  22.           'handle.php',
  23.           {
  24.              message:pic,
  25.             filename:fname[0],
  26.             filetype:fname[1],
  27.             filesize:fi.size
  28.           },
  29.           function(data){
  30.             data = eval('('+data+')');
  31.             if(data.code == 1 || data.code == 2){
  32.               console.log('上传失败')
  33.             }else if(data.code == 0){
  34.               console.log('上传成功')
  35.             }
  36.           }
  37.         );
  38.       }
  39.     }
  40.   })
  41. </script>
复制代码
接下来是PHP处理代码  handle.php
  1. $imgtype = array(
  2.   'gif'=>'gif',
  3.   'png'=>'png',
  4.   'jpg'=>'jpeg',
  5.   'jpeg'=>'jpeg'
  6. ); //图片类型在传输过程中对应的头信息
  7. $message = $_POST['message']; //接收以base64编码的图片数据
  8. $filename = $_POST['filename']; //接收文件名称
  9. $ftype = $_POST['filetype']; //接收文件类型
  10. //首先将头信息去掉，然后解码剩余的base64编码的数据
  11. $message = base64_decode(substr($message,strlen('data:image/'.$imgtype[strtolower($ftype)].';base64,')));
  12. $filename = $filename.".".$ftype;
  13. $furl = "D:/now/";
  14. //开始写文件
  15. $file = fopen($furl.$filename,"w");
  16. if(fwrite($file,$message) === false){
  17.   echo json_encode(array('code'=>1,'con'=>'failed'));
  18.   exit;
  19. }
  20. echo json_encode(array('code'=>0,'con'=>$filename));
复制代码
选择文件然后点击上传的效果如下图
1.png

以上就是整个图片上传的代码。当然对于PHP的部分还有很多可以优化的地方，比如文件名部分，可以重命名，以保证相同文件名上传以后的文件名是不同的等等。这种上传方式我也是刚开始使用，当初是受Node.js做上传的的启发，然后尝试着应用于PHP，没想到还真能上传成功。




欢迎光临 黑帽联盟 (https://bbs.cnblackhat.com/) Powered by Discuz! X2.5