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 相关文章推荐
MYSQL环境变量设置方法
Jan 15 PHP
php self,$this,const,static,-&amp;gt;的使用
Oct 22 PHP
PHP判断搜索引擎蜘蛛并自动记忆到文件的代码
Feb 04 PHP
配置php网页显示各种语法错误
Sep 23 PHP
thinkphp使用literal防止模板标签被解析的方法
Nov 22 PHP
老版本PHP转义Json里的特殊字符的函数
Jun 08 PHP
超详细的php用户注册页面填写信息完整实例(附源码)
Nov 17 PHP
详解PHP的Yii框架中扩展的安装与使用
Apr 01 PHP
微信公众号判断用户是否已关注php代码解析
Jun 24 PHP
php 数组处理函数extract详解及实例代码
Nov 23 PHP
ThinkPHP 在阿里云上的nginx.config配置实例详解
Oct 11 PHP
PHP 爬取网页的主要方法
Jul 13 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
PHP5+UTF8多文件上传类
2008/10/17 PHP
php的hash算法介绍
2014/02/13 PHP
浅谈thinkphp5 instance 的简单实现
2017/07/30 PHP
关于PHP虚拟主机概念及如何选择稳定的PHP虚拟主机
2018/11/20 PHP
PHP 计算两个时间段之间交集的天数示例
2019/10/24 PHP
CL vs ForZe BO5 第三场 2.13
2021/03/10 DOTA
jQuery EasyUI API 中文文档 - Documentation 文档
2011/09/29 Javascript
javascript数组输出的两种方式
2015/01/13 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
2016/07/26 Javascript
JavaScript面向对象继承原理与实现方法分析
2018/08/09 Javascript
对angular4子路由&amp;辅助路由详解
2018/10/09 Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
2018/12/13 Javascript
jquery获取img的src值实例介绍
2019/01/16 jQuery
深入理解Puppeteer的入门教程和实践
2019/03/05 Javascript
js实现全选反选不选功能代码详解
2019/04/24 Javascript
layui--js控制switch的切换方法
2019/09/03 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
2019/11/06 Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
2020/02/20 Javascript
js如何验证密码强度
2020/03/18 Javascript
基于JavaScript或jQuery实现网站夜间/高亮模式
2020/05/30 jQuery
Vue实现穿梭框效果
2020/09/30 Javascript
一文秒懂nodejs中的异步编程
2021/01/28 NodeJs
python负载均衡的简单实现方法
2018/02/04 Python
PyTorch上实现卷积神经网络CNN的方法
2018/04/28 Python
python 计算数据偏差和峰度的方法
2019/06/29 Python
基于Python新建用户并产生随机密码过程解析
2019/10/08 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧装饰器信号与槽详细使用方法与实例
2020/03/06 Python
Python基于traceback模块获取异常信息
2020/07/23 Python
Python 实现国产SM3加密算法的示例代码
2020/09/21 Python
matplotlib之pyplot模块之标题(title()和suptitle())
2021/02/22 Python
澳大利亚小众服装品牌:Maurie & Eve
2018/03/27 全球购物
大学同学聚会邀请函
2014/01/29 职场文书
2014年两会学习心得范例
2014/03/17 职场文书
公司担保书范文
2014/05/21 职场文书
团队队名口号大全
2014/06/06 职场文书
教师评职称工作总结2015
2015/04/20 职场文书