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 相关文章推荐
FCKeditor添加自定义按钮
Mar 27 PHP
php5新改动之短标记启用方法
Sep 11 PHP
php中的注释、变量、数组、常量、函数应用介绍
Nov 16 PHP
php实现检查文章是否被百度收录
Jan 27 PHP
PHP开发注意事项总结
Feb 04 PHP
php构造函数的继承方法
Feb 09 PHP
CI框架集成Smarty的方法分析
May 17 PHP
PHP依赖注入(DI)和控制反转(IoC)详解
Jun 12 PHP
PHP模型Model类封装数据库操作示例
Mar 14 PHP
PHP封装的数据库模型Model类完整示例【基于PDO】
Mar 14 PHP
laravel validate 设置为中文的例子(验证提示为中文)
Sep 29 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
Nov 14 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 上传文件的方法(类)
2009/07/30 PHP
探讨Smarty中如何获取数组的长度以及smarty调用php函数的详解
2013/06/20 PHP
PHP实现的堆排序算法详解
2017/08/17 PHP
javascript parseInt与Number函数的区别
2010/01/21 Javascript
动态加载script文件的两种方法
2013/08/15 Javascript
JSON取值前判断
2014/12/23 Javascript
JavaScript中实现依赖注入的思路分享
2015/01/15 Javascript
js实现简单秒表走动的时钟特效
2020/03/25 Javascript
利用jQuery和CSS将背景图片拉伸
2015/10/16 Javascript
javascript实现tab切换的两个实例
2015/11/05 Javascript
JS实现间歇滚动的运动效果实例
2016/12/22 Javascript
vue实现添加标签demo示例代码
2017/01/21 Javascript
vue.js组件之间传递数据的方法
2017/07/10 Javascript
vue 动态修改a标签的样式的方法
2018/01/18 Javascript
nodejs检测因特网是否断开的解决方案
2019/04/17 NodeJs
Echarts实现单条折线可拖拽效果
2019/12/19 Javascript
Node.js 深度调试方法解析
2020/07/28 Javascript
解决vue字符串换行问题(绝对管用)
2020/08/06 Javascript
Vue前端判断数据对象是否为空的实例
2020/09/02 Javascript
vue+elementUI实现简单日历功能
2020/09/24 Javascript
Python三元运算实现方法
2015/01/12 Python
Python实现获取域名所用服务器的真实IP
2015/10/25 Python
python版学生管理系统
2018/01/10 Python
django fernet fields字段加密实践详解
2019/08/12 Python
scikit-learn线性回归,多元回归,多项式回归的实现
2019/08/29 Python
Python 静态方法和类方法实例分析
2019/11/21 Python
使用pytorch实现可视化中间层的结果
2019/12/30 Python
解决python虚拟环境切换无效的问题
2020/04/30 Python
Python3爬虫里关于Splash负载均衡配置详解
2020/07/10 Python
美国宠物用品网站:Value Pet Supplies
2018/03/17 全球购物
2014年高中班主任工作总结
2014/11/08 职场文书
党员思想汇报材料
2014/12/19 职场文书
《学会生存》读后感3篇
2019/12/09 职场文书
matlab xlabel位置的设置方式
2021/05/21 Python
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
2021/10/05 Javascript
未发现nvidia显卡怎么办?Win11系统中未检测到nvidia显卡解决教程
2022/04/08 数码科技