当前位置:Gxlcms > php框架 > php+html5实现无刷新图片上传教程

php+html5实现无刷新图片上传教程

时间:2021-07-01 10:21:17 帮助过:61人阅读

本篇向大家介绍一种全新的上传图片的方式,利用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>

样式如下图

接下来是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));

选择文件然后点击上传的效果如下图

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

希望大家也可以按照此方法实现图片上传。

人气教程排行