php + WebUploader实现图片批量上传功能


Posted in PHP onMay 06, 2019

一.webuploader

webuploader主要用来做文件的上传,支持批量上传和图片预览,图片预览是将图片生成base64数据直接在标签中使用,所以能够达到的效果是未真正上传图片可以先看到上传的效果。更多具体的介绍,可以上webuploader的官方网址看,我一直认为,看官网文档是学习最直接的途径。 webuploader官方网站,顺带一提,webuploader是由Baidu Fex Team团队进行维护的。

二. webuploader上传原理

1. PHP+HTML表单上传文件

在讲这个之前,需要先了解一下php的文件上传方式,上传分两个部分

先通过html创建表单,在表单中添加

<input type='file' name='xxx'>

的文件上传标签,点击上传的submit 按钮之后,就可以将文件上传到服务器了。

2. 到了服务器端,接收到的上传文件会被存储在php指定的临时文件夹中,利用PHP的内置函数move_uploaded_file(),就可以将临时文件移动到你想要的目标文件夹中,这个过程可以对文件进行改名、做大小判断是否符合条件等,这样上传就完成了。

完整的php表单上传案例,可以看w3school的这篇文章,这里就不累赘了。PHP+HTML表单上传文件

2. webuploader上传原理

使用php+html表单上传可以完成文件的上传工作,但是有缺点,

  • 上传文件时必须提交整个页面,这样页面会被刷新
  • 上传图片是没办法进行图片预览,所以有时候上传错了图片也要等到图片真正上传上去之后刷新了页面才知道。

webuploader解决了这两个问题,webuploader使用ajax技术提交表单,上传的时候不需要提交页面,可以利用事件监听机制监听上传的结果,在页面中做出反馈,而且还能做图片预览。使用webuploader上传图片,也只需要几步:

  • 前台HTML页面配置webuploader
  • 后台服务器PHP页面接受webuploader的上传图片,然后进行处理。
  • 后台处理完图片返回json数据的结果给前台
  • 前台接收后作出反馈。

这里说一点,后台PHP接收和处理图片其实和PHP+HTML表单上传基本是一样的。

三. webuploader的配置和使用

所有的配置参数和使用方法都可以查看官方文件。webuploader官方网站,在webuploader github仓库中有一些example案例可以参考。example

我的运行环境:php5.6+nginx+macOS

我的文件夹的目录

  • index.php
  • upload_img.php
  • mywebupload.js
  • webuploader/
  • uploads/

1. 前台HTML页面配置webupload

主要做以下几个步骤:

  • 引入webuploader的相关js和css包
  • 创建HTML标签
  • 创建一个js文件,初始化webuploader  以下是整个页面代码,webuploader文件夹是在github上整个搬运下来的,然后我还用到了jquery来增强页面的体验。

index.html

<!doctype html>
<html lang="cn">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>WebUploader演示</title>
  <link rel="stylesheet" type="text/css" href="webuploader/css/webuploader.css" />
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" />
  <link rel="shortcut icon" href="favicon.ico">
</head>
<body>

  <div id="imgPicker">选择文件</div>
  <button class="btn btn-primary btn-upload">上传</button>
  <div class="img-thumb"></div>
  <div class="result"></div>
  
<!--jquery 1.12-->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!--bootstrap核心js文件-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<!--webuploader js-->
<!--<script type="text/javascript" src="static/jquery.js"></script>-->
<script type="text/javascript" src="webuploader/dist/webuploader.min.js"></script>
<script type="text/javascript" src="mywebupload.js"></script>
</body>
</html>

mywebupload.js

$(function(){

  /*
   *  配置webuploader
   */

  var imgUploader = WebUploader.create({
    fileVal: 'img', // 相当于input标签的name属性,用于后台PHP识别接收上传文件的field
    swf: './webuploader/dist/Uploader.swf', // swf文件路径
    server: './upload_img.php', // 文件接收服务端。
    fileNumLimit: 10,  // 上传文件的限制
    pick: {
      id : '#imgPicker',  // 
      multiple : true      // 是否支持多文件上传
    },
    // 只允许上传图片
    accept: {
      title: 'Only Images',
      extensions: 'gif,jpg,jpeg,bmp,png',
      mimeTypes: 'image/jpg,image/jpeg,image/png,image/gif,image/bmp'
    },
    auto: false,  // 添加文件后是否自动上传上去,我设置了false,后面我会利用自己的上传按钮上传
    resize: false  // 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
  });
  
  /*
   *  设置上传按钮的单击事件
   */
  $('.btn-upload').click(function(){
    imgUploader.upload();  // webuploader内置的upload函数,启动webuploader的上传  
  });
  
  /*
   *  配置webuploader的事件监听 
   */
  
  // 当图片文件被添加到上传队列中
  imgUploader.on('fileQueued', function (file) {
    addImgThumb(file);
  });
  
  // 生产图片预览
  function addImgThumb(file){
    imgUploader.makeThumb(file, function(error, ret){
      if(!error){
        img = '<img alt="" src="' + ret + '" />';
        $('.img-thumb').append(img);
      }else{
        console.log('making img error');
      }
    },1,1);
  }
  
  imgUploader.on('uploadSuccess'), function(file, response){
    // response 是后台upload_img.php返回的数据
    if(response.success){
      $('.result').append('<p>' + file.name + '上传成功</p>')
    }else{
      $('.result').append('<p>' + response.message + '</p>')
    }
  });
})

2. 后台PHP页面处理上传文件

这里要注意几点:

1 后台处理的php文件文件名必须跟webuploader配置的时候一样。

2 上传的文件夹记得设置好权限,linux可以利用chmod来修改文件夹权限,否则会导致上传失败。

我这里的处理方式比较简单,有什么问题可以给我留言。

upload_img.php

<?php
  $field = 'img';  // 对应webupload里设置的fileVal
  
  $savePath = './uploads/';    // 这里注意设置uploads文件夹的权限
  $saveName = time() . uniqid() . '_' . $_FILES[$field]['name']; // 为文件重命名
  $fullName = $savePath . $saveName; 
  
  if (file_exists($fullName)) {
    $result = [
      'success'=>false, 
      'message'=>'相同文件名的文件已经存在'
    ];
  }else{
    move_uploaded_file($_FILES[$field]["tmp_name"], $fullName);
    $result = ['success'=>true, 'fullName'=>$fullName];
  }
  
  return json_encode($result); // 将结果打包成json格式返回
?>

以上就是webuploader的全部内容,更多webuploader的参数配置和事件可以参考webuploader的官方网址。希望大家多多留言交流指正。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

PHP 相关文章推荐
PHP 超链接 抓取实现代码
Jun 29 PHP
使用VisualStudio开发php的图文设置方法
Aug 21 PHP
php比较多维数组中值的大小排序实现代码
Sep 08 PHP
对PHP PDO的一些认识小结
Jan 23 PHP
PHP yii实现model添加默认值的方法(两种方法)
Nov 10 PHP
thinkphp的dump函数无输出实例代码
Nov 15 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
Sep 17 PHP
Laravel框架自定义验证过程实例分析
Feb 01 PHP
php防止表单重复提交实例讲解
Feb 11 PHP
php自定义排序uasort函数示例【二维数组按指定键值排序】
Jun 19 PHP
php根据地址获取百度地图经纬度的实例方法
Sep 03 PHP
在laravel-admin中列表中禁止某行编辑、删除的方法
Oct 03 PHP
thinkPHP5.1框架路由::get、post请求简单用法示例
May 06 #PHP
ThinkPHP5.1框架页面跳转及修改跳转页面模版示例
May 06 #PHP
PHP实现八皇后算法
May 06 #PHP
Laravel中10个有用的用法小结
May 06 #PHP
Mac下快速搭建PHP开发环境步骤详解
May 05 #PHP
ThinkPHP3.2框架操作Redis的方法分析
May 05 #PHP
tp5框架内使用tp3.2分页的方法分析
May 05 #PHP
You might like
谈谈新手如何学习PHP
2006/12/14 PHP
PHP学习笔记之数组篇
2011/06/28 PHP
php浏览历史记录的方法
2015/03/10 PHP
WordPress中用于检索模版的相关PHP函数使用解析
2015/12/15 PHP
thinkPHP多域名情况下使用memcache方式共享session数据的实现方法
2016/07/21 PHP
jquery 学习之二 属性(html()与html(val))
2010/11/25 Javascript
js中的数组Array定义与sort方法使用示例
2013/08/29 Javascript
Javascript执行效率全面总结
2013/11/04 Javascript
JavaScript获取两个数组交集的方法
2015/06/09 Javascript
纯js实现手风琴效果
2020/04/17 Javascript
Web程序员必备的7个JavaScript函数
2016/06/14 Javascript
将List对象列表转换成JSON格式的类实现方法
2016/07/04 Javascript
浅析Javascript ES6中的原生Promise
2016/08/25 Javascript
JavaScript中闭包之浅析解读(必看篇)
2016/08/25 Javascript
jQuery+正则+文本框只能输入数字的实现方法
2016/10/07 Javascript
canvas实现简易的圆环进度条效果
2017/02/28 Javascript
利用angularjs1.4制作的简易滑动门效果
2017/02/28 Javascript
vue拦截器Vue.http.interceptors.push使用详解
2017/04/22 Javascript
解决Layui中layer报错的问题
2019/09/03 Javascript
详解Django中的权限和组以及消息
2015/07/23 Python
python实现将文件夹下面的不是以py文件结尾的文件都过滤掉的方法
2018/10/21 Python
Flask之请求钩子的实现
2018/12/23 Python
详解Python的三种拷贝方式
2020/02/11 Python
如何在python中执行另一个py文件
2020/04/30 Python
解决pycharm中的run和debug失效无法点击运行
2020/06/09 Python
Boden美国官网:英伦原创时装品牌
2017/07/03 全球购物
巴西箱包、背包、钱包和旅行配件购物网站:Inovathi
2019/12/14 全球购物
房地产开发项目建议书
2014/05/16 职场文书
消防安全宣传标语
2014/06/07 职场文书
社团活动总结书
2014/06/27 职场文书
党的群众路线教育实践活动对照检查材料
2014/09/22 职场文书
2014年药剂科工作总结
2014/11/26 职场文书
审美与表现自我评价
2015/03/09 职场文书
我的中国梦主题教育活动总结
2015/05/07 职场文书
初中团支书竞选稿
2015/11/21 职场文书
祝福语集锦:给百岁老人祝寿贺词
2019/11/19 职场文书