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开发中常用的三个表单验证函数使用小结
Mar 03 PHP
php中常用的预定义变量小结
May 09 PHP
浅析php中三个等号(===)和两个等号(==)的区别
Aug 06 PHP
Laravel框架数据库CURD操作、连贯操作总结
Sep 03 PHP
php 删除cookie方法详解
Dec 01 PHP
php判断文件夹是否存在不存在则创建
Apr 09 PHP
PHP之正则表达式捕获组与非捕获组(详解)
Jul 29 PHP
php生成唯一数字id的方法汇总
Nov 18 PHP
PHP实现的线索二叉树及二叉树遍历方法详解
Apr 25 PHP
yii2超好用的日期组件和时间组件
May 05 PHP
php处理抢购类功能的高并发请求
Feb 08 PHP
PHP使用函数用法详解
Sep 30 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
为什么那些咖啡爱好者大多看不上连锁咖啡店?
2021/03/06 咖啡文化
网友原创的PHP模板类代码
2008/09/07 PHP
浏览器关闭后,能继续执行的php函数(ignore_user_abort)
2012/08/01 PHP
PHP异常处理浅析
2015/05/12 PHP
百度工程师讲PHP函数的实现原理及性能分析(二)
2015/05/13 PHP
添加到收藏夹代码(兼容几乎所有的浏览器)
2007/01/09 Javascript
JavaScript中的Document文档对象
2008/01/16 Javascript
jQuery 入门级学习笔记及源码
2010/01/22 Javascript
IE6下CSS图片缓存问题解决方法
2010/12/09 Javascript
JavaScript中的this实例分析
2011/04/28 Javascript
jQuery contains过滤器实现精确匹配使用方法
2013/04/12 Javascript
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
2013/04/15 Javascript
深入理解javascript变量声明
2014/11/20 Javascript
Nodejs实现多人同时在线移动鼠标的小游戏分享
2014/12/06 NodeJs
JS解析XML文件和XML字符串详解
2015/04/17 Javascript
如何实现移动端浏览器不显示 pc 端的广告
2015/10/15 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
2016/01/04 Javascript
javascript实现checkbox复选框实例代码
2016/01/10 Javascript
jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】
2017/03/08 Javascript
详解angular ui-grid之过滤器设置
2017/06/07 Javascript
nodejs实现截取上传视频中一帧作为预览图片
2017/12/10 NodeJs
Vue组件开发技巧总结
2018/03/04 Javascript
JavaScript实现简单计算器功能
2019/12/19 Javascript
JavaScript实现动态生成表格
2020/08/02 Javascript
[08:07]DOTA2每周TOP10 精彩击杀集锦vol.8
2014/06/25 DOTA
python实现巡检系统(solaris)示例
2014/04/02 Python
pycharm 使用心得(四)显示行号
2014/06/05 Python
python 遍历字符串(含汉字)实例详解
2017/04/04 Python
Python基于更相减损术实现求解最大公约数的方法
2018/04/04 Python
Python框架Flask的基本数据库操作方法分析
2018/07/13 Python
CSS3实现粒子旋转伸缩加载动画
2016/04/22 HTML / CSS
房屋租赁合同解除协议书
2014/10/11 职场文书
2015年生产车间工作总结
2015/04/22 职场文书
python 爬取吉首大学网站成绩单
2021/06/02 Python
vue如何清除浏览器历史栈
2022/05/25 Vue.js
SpringBoot项目部署到阿里云服务器的实现步骤
2022/06/28 Java/Android