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

站长资源 2024/11/28 佚名

2 0 1

一.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="/UploadFiles/2021-04-02/jquery.min.js">

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="/UploadFiles/2021-04-02/' + ret + '">

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


这里要注意几点：


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


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


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


upload_img.php




<"tmp_name"], $fullName);
    $result = ['success'=>true, 'fullName'=>$fullName];
  }
  
  return json_encode($result); // 将结果打包成json格式返回
"color: #ff0000">总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对的支持。

                                
                                
                                    webuploader多图上传,webuploader,上传,webuploader图片批量上传

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“php + WebUploader实现图片批量上传功能”

暂无评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

2024年11月28日

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

PHP连接SQL Server的方法分析【基于thinkPHP5.1框架】

thinkPHP5.1框架路由::get、post请求简单用法示例

评论“php + WebUploader实现图片批量上传功能”

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接