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


Posted in PHP onJanuary 22, 2016

本篇向大家介绍一种全新的上传图片的方式,利用html5的FileReader读取图片文件,然后将数据传输到服务器再使用PHP进行处理。实现过程如下(带图片预览功能)
前端html代码 upload,html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>上传</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<style>
.upload{
  width:300px;
  height:200px;
  position:relative;
}
.upload input[type='file']{
  position:absolute;
  width:70px;
  top:0;
  left:0;
  z-index:10;
  opacity:0;
  filter:alpha(opacity=0);
}
.upload input.selbutton{
  width:70px;
  height:30px;
  background:#cf001b;
  color:#FFF;
  font-size:14px;
  position:absolute;
  top:0;left:0;
  z-index:9;
  border:none;
  cursor:pointer;
}
.upload input.upbutton{
  width:70px;
  height:30px;
  background:#cf001b;
  color:#FFF;
  font-size:14px;
  position:absolute;
  top:50px;left:0;
  z-index:10;
  border:none;
  cursor:pointer;
}
</style>
</head>
<body>
<div class='upload'>
  <input type="file" name="file" />
  <input type="button" name="selbutton" class="selbutton" value="选择文件" />
  <input type="button" name="upbutton" class="upbutton" value="上传" />
</div>
<div class='previews'>
  <img src="#" class="image_thumb" alt="图片预览"/>
</div>
</body>
</html>

样式如下图

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

接下来是js代码

<script type="text/javascript">
  $(".upbutton").click(function(){
    //定义允许上传的图片格式 在前台就可以直接判断,不合法的格式将不会上传
   var filetype = ['jpg','jpeg','png','gif'];
   if($('.image').get(0).files){
      fi = $('.image').get(0).files[0]; //得到文件信息
      //判断文件格式是否是图片 如果不是图片则返回false
      var fname = fi.name.split('.');
      if(filetype.indexOf(fname[1].toLowerCase()) == -1){
        alert('文件格式不支持');
        return ;
      }
      //实例化h5的fileReader
      var fr = new FileReader();
      fr.readAsDataURL(fi); //以base64编码格式读取图片文件
      fr.onload = function(frev){
        pic = frev.target.result; //得到结果数据
      //开始上传之前,预览图片
 $('.image_thumb').attr('src',pic);
//使用ajax 利用post方式提交数据
        $.post(
          'handle.php',
          {
             message:pic,
            filename:fname[0],
            filetype:fname[1],
            filesize:fi.size
          },
          function(data){
            data = eval('('+data+')');
            if(data.code == 1 || data.code == 2){
              console.log('上传失败')
            }else if(data.code == 0){
              console.log('上传成功')
            }
          }
        );
      }
    }
  })
</script>

接下来是PHP处理代码  handle.php

$imgtype = array(
  'gif'=>'gif',
  'png'=>'png',
  'jpg'=>'jpeg',
  'jpeg'=>'jpeg'
); //图片类型在传输过程中对应的头信息
$message = $_POST['message']; //接收以base64编码的图片数据
$filename = $_POST['filename']; //接收文件名称
$ftype = $_POST['filetype']; //接收文件类型
//首先将头信息去掉,然后解码剩余的base64编码的数据
$message = base64_decode(substr($message,strlen('data:image/'.$imgtype[strtolower($ftype)].';base64,')));
$filename = $filename.".".$ftype;
$furl = "D:/now/";
//开始写文件
$file = fopen($furl.$filename,"w");
if(fwrite($file,$message) === false){
  echo json_encode(array('code'=>1,'con'=>'failed'));
  exit;
}
echo json_encode(array('code'=>0,'con'=>$filename));

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

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

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

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

PHP 相关文章推荐
PHP开发的一些注意点总结
Oct 12 PHP
遍历指定目录下的所有目录和文件的php代码
Nov 27 PHP
解析CI的AJAX分页 另类实现方法
Jun 27 PHP
php格式化日期和时间格式化示例分享
Feb 24 PHP
完善CodeIgniter在IDE中代码提示功能的方法
Jul 19 PHP
带你了解PHP7 性能翻倍的关键
Nov 19 PHP
微信公众平台DEMO(PHP)
May 04 PHP
PHP控制前台弹出对话框的实现方法
Aug 21 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
Aug 31 PHP
php静态成员方法和静态的成员属性的使用方法
Oct 26 PHP
PHP+swoole+linux实现系统监控和性能优化操作示例
Apr 15 PHP
Swoole扩展的6种模式深入详解
Mar 04 PHP
PHP中的随机性 你觉得自己幸运吗?
Jan 22 #PHP
PHP中的session安全吗?
Jan 22 #PHP
PHP下载远程图片并保存到本地方法总结
Jan 22 #PHP
PHP连接MYSQL数据库实例代码
Jan 20 #PHP
CodeIgniter配置之autoload.php自动加载用法分析
Jan 20 #PHP
Twig模板引擎用法入门教程
Jan 20 #PHP
CodeIgniter控制器之业务逻辑实例分析
Jan 20 #PHP
You might like
PHP学习资料汇总与网址
2007/03/16 PHP
php 安全过滤函数代码
2011/05/07 PHP
深入解析PHP中的(伪)多线程与多进程
2013/07/01 PHP
在PHP中使用X-SendFile头让文件下载更快
2014/06/01 PHP
ThinkPHP防止重复提交表单的方法实例分析
2018/05/10 PHP
基于jquery完美拖拽,可返回拖动轨迹
2012/03/29 Javascript
js实现可拖动DIV的方法
2013/12/17 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
2014/12/09 Javascript
JavaScript中的比较操作符&gt;、=、
2014/12/31 Javascript
如何动态加载外部Javascript文件
2015/12/02 Javascript
JS传值出现中文参数乱码的解决方法
2016/06/30 Javascript
jquery select2的使用心得(推荐)
2016/12/04 Javascript
ES6概念 Symbol.keyFor()方法
2016/12/25 Javascript
layui 设置table 行的高度方法
2018/08/17 Javascript
微信小程序使用canvas的画图操作示例
2019/01/18 Javascript
详解ES7 Decorator 入门解析
2019/02/18 Javascript
详解JavaScript中关于this指向的4种情况
2019/04/18 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
2019/08/08 Javascript
详解React 元素渲染
2020/07/07 Javascript
[01:06:32]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第一局
2016/02/28 DOTA
[01:04:30]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
详解Python中的文本处理
2015/04/11 Python
Python简单计算文件夹大小的方法
2015/07/14 Python
Python中pow()和math.pow()函数用法示例
2018/02/11 Python
在Python dataframe中出生日期转化为年龄的实现方法
2018/10/20 Python
解决pyCharm中 module 调用失败的问题
2020/02/12 Python
Python发送手机动态验证码代码实例
2020/02/28 Python
DjangoWeb使用Datatable进行后端分页的实现
2020/05/18 Python
区分python中的进程与线程
2020/08/13 Python
基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
2016/01/11 HTML / CSS
实例讲解使用SVG制作loading加载动画的方法
2016/04/05 HTML / CSS
《小动物过冬》教学反思
2014/04/17 职场文书
幼儿园开学家长寄语(2016秋季)
2015/12/03 职场文书
fastdfs+nginx集群搭建的实现
2021/03/31 Servers
MySQL Shell的介绍以及安装
2021/04/24 MySQL
Meta增速拉垮,元宇宙难当重任
2022/04/29 数码科技