php+html5实现无刷新图片上传教程，-php手册-PHP中文网

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

您可能感兴趣的文章:

首页

php教程

php手册

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 13, 2016 am 08:47 AM

html5 php 图片上传无刷新

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

本篇向大家介绍一种全新的上传图片的方式，利用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 class="image_thumb lazy"  src="/static/imghw/default1.png"  data-src="#"  alt="图片预览"/>
</div>
</body>
</html>

登录后复制

样式如下图

接下来是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的部分还有很多可以优化的地方，比如文件名部分，可以重命名，以保证相同文件名上传以后的文件名是不同的等等。这种上传方式我也是刚开始使用，当初是受Node.js做上传的的启发，然后尝试着应用于PHP，没想到还真能上传成功。

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

您可能感兴趣的文章:

PHP图片上传类带图片显示
简单的PHP图片上传程序
php ajax无刷新上传图片实例代码
php 图片上传类代码
thinkphp实现图片上传功能分享
使用PHP和HTML5 FormData实现无刷新文件上传教程
ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法
php多个文件及图片上传实例详解

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

Java教程

1657

CakePHP 教程

1415

Laravel 教程

1309

PHP教程

1257

C# 教程

1231

显示更多

Related knowledge

在PHP API中说明JSON Web令牌（JWT）及其用例。 Apr 05, 2025 am 12:04 AM

JWT是一种基于JSON的开放标准，用于在各方之间安全地传输信息，主要用于身份验证和信息交换。1.JWT由Header、Payload和Signature三部分组成。2.JWT的工作原理包括生成JWT、验证JWT和解析Payload三个步骤。3.在PHP中使用JWT进行身份验证时，可以生成和验证JWT，并在高级用法中包含用户角色和权限信息。4.常见错误包括签名验证失败、令牌过期和Payload过大，调试技巧包括使用调试工具和日志记录。5.性能优化和最佳实践包括使用合适的签名算法、合理设置有效期、

解释PHP中的晚期静态绑定（静态：:)。 Apr 03, 2025 am 12:04 AM

静态绑定（static::）在PHP中实现晚期静态绑定（LSB），允许在静态上下文中引用调用类而非定义类。1）解析过程在运行时进行，2）在继承关系中向上查找调用类，3）可能带来性能开销。

PHP和Python：比较两种流行的编程语言 Apr 14, 2025 am 12:13 AM

PHP和Python各有优势，选择依据项目需求。1.PHP适合web开发，尤其快速开发和维护网站。2.Python适用于数据科学、机器学习和人工智能，语法简洁，适合初学者。

PHP：网络开发的关键语言 Apr 13, 2025 am 12:08 AM

PHP是一种广泛应用于服务器端的脚本语言，特别适合web开发。1.PHP可以嵌入HTML，处理HTTP请求和响应，支持多种数据库。2.PHP用于生成动态网页内容，处理表单数据，访问数据库等，具有强大的社区支持和开源资源。3.PHP是解释型语言，执行过程包括词法分析、语法分析、编译和执行。4.PHP可以与MySQL结合用于用户注册系统等高级应用。5.调试PHP时，可使用error_reporting()和var_dump()等函数。6.优化PHP代码可通过缓存机制、优化数据库查询和使用内置函数。7

PHP行动：现实世界中的示例和应用程序 Apr 14, 2025 am 12:19 AM

PHP在电子商务、内容管理系统和API开发中广泛应用。1)电子商务：用于购物车功能和支付处理。2)内容管理系统：用于动态内容生成和用户管理。3)API开发：用于RESTfulAPI开发和API安全性。通过性能优化和最佳实践，PHP应用的效率和可维护性得以提升。

PHP与Python：了解差异 Apr 11, 2025 am 12:15 AM

PHP和Python各有优势，选择应基于项目需求。1.PHP适合web开发，语法简单，执行效率高。2.Python适用于数据科学和机器学习，语法简洁，库丰富。

说明匹配表达式（PHP 8）及其与开关的不同。 Apr 06, 2025 am 12:03 AM

在PHP8 中，match表达式是一种新的控制结构，用于根据表达式的值返回不同的结果。1)它类似于switch语句，但返回值而非执行语句块。2)match表达式使用严格比较（===），提升了安全性。3)它避免了switch语句中可能的break遗漏问题，增强了代码的简洁性和可读性。

PHP与其他语言：比较 Apr 13, 2025 am 12:19 AM

PHP适合web开发，特别是在快速开发和处理动态内容方面表现出色，但不擅长数据科学和企业级应用。与Python相比，PHP在web开发中更具优势，但在数据科学领域不如Python；与Java相比，PHP在企业级应用中表现较差，但在web开发中更灵活；与JavaScript相比，PHP在后端开发中更简洁，但在前端开发中不如JavaScript。

See all articles

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

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

您可能感兴趣的文章:

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题