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面向对象全攻略 (十四) php5接口技术
Sep 30 PHP
PHP实现手机号码中间四位用星号(*)隐藏的自定义函数分享
Sep 27 PHP
PHP将HTML转换成文本的实现代码
Jan 21 PHP
PHP处理大量表单字段的便捷方法
Feb 07 PHP
php在apache环境下实现gzip配置方法
Apr 02 PHP
PHP生成plist数据的方法
Jun 16 PHP
Zend Framework自定义Helper类相关注意事项总结
Mar 14 PHP
php数组冒泡排序算法实例
May 06 PHP
浅谈PHP链表数据结构(单链表)
Jun 08 PHP
PHPCMS V9 添加二级导航的思路详解
Oct 20 PHP
如何修改yii2.0自带的user表为其它的表
Aug 01 PHP
启用OPCache提高PHP程序性能的方法
Mar 21 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
PHP6 mysql连接方式说明
2009/02/09 PHP
PHP 单引号与双引号的区别
2009/11/24 PHP
php类的定义与继承用法实例
2015/07/07 PHP
PHP不使用内置函数实现字符串转整型的方法示例
2017/07/03 PHP
php/JS实现的生成随机密码(验证码)功能示例
2019/06/06 PHP
javascript语言结构小记(一)
2011/09/10 Javascript
window.event快达到全浏览器支持了,以后使用就方便了
2011/11/30 Javascript
基于pthread_create,readlink,getpid等函数的学习与总结
2013/07/17 Javascript
javascript实现将文件保存到本地方法汇总
2015/07/26 Javascript
jQuery prototype冲突的2种解决方法(附demo示例下载)
2016/01/21 Javascript
JavaScript获取IP获取的是IPV6 如何校验
2016/06/12 Javascript
用nodejs的实现原理和搭建服务器(动态)
2016/08/10 NodeJs
微信小程序 传值取值的几种方法总结
2017/01/16 Javascript
React Native AsyncStorage本地存储工具类
2017/10/24 Javascript
Vue 中如何正确引入第三方模块的方法步骤
2019/05/05 Javascript
jQuery pager.js 插件动态分页功能实例分析
2019/08/02 jQuery
15分钟学会vue项目改造成SSR(小白教程)
2019/12/17 Javascript
用Angular实现一个扫雷的游戏示例
2020/05/15 Javascript
Python比较文件夹比另一同名文件夹多出的文件并复制出来的方法
2015/03/05 Python
在pycharm中设置显示行数的方法
2019/01/16 Python
解决Python安装时报缺少DLL问题【两种解决方法】
2019/07/15 Python
详解python实现小波变换的一个简单例子
2019/07/18 Python
numpy库reshape用法详解
2020/04/19 Python
python如何保存文本文件
2020/06/07 Python
使用python实现下载我们想听的歌曲,速度超快
2020/07/09 Python
CSS3轻松实现清新 Loading 效果的简单实例
2016/06/06 HTML / CSS
新西兰第一的行李箱网站:luggage.co.nz
2019/07/22 全球购物
马云的职业生涯规划之路
2014/01/01 职场文书
幼儿园新学期寄语
2014/01/18 职场文书
聘任书模板
2014/03/29 职场文书
好习惯伴我成长演讲稿
2014/05/21 职场文书
学生上课迟到检讨书
2015/01/01 职场文书
2015年世界无烟日活动总结
2015/02/10 职场文书
傲慢与偏见读书笔记
2015/06/29 职场文书
Mysql数据库命令大全
2021/05/26 MySQL
logback 实现给变量指定默认值
2021/08/30 Java/Android