首页 / PHP / php + WebUploader实现图片批量上传功能

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了php + WebUploader实现图片批量上传功能，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5420字，纯文字阅读大概需要8分钟。

内容图文

一.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 + WebUploader实现图片批量上传功能全部内容，希望文章能够帮你解决php + WebUploader实现图片批量上传功能所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/276737.html

来源：【匿名】

【上一篇】PHP连接SQL Server的方法分析【基于thinkPHP5.1框架】【下一篇】PHP 5 数据对象 (PDO) 抽象层与 Oracle

更多 ►

【php + WebUploader实现图片批量上传功能】教程文章相关的互联网学习教程文章

PHP上传文件【代码】

主界面：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>无标题文档</title></head><body><form action="filecl.php" method="post" enctype="multipart/form-data"><input type="file" name="file"/><input type="s...

PHP ssh链接sftp上传下载【代码】

<?php //需要开启 php_ssh2 扩展。安装扩展后 php.ini 里添加 extension=ssh2class Sftp {// 连接为NULLprivate $conn = NULL;// 是否使用秘钥登陆private $usePubKey= false;//sftp 句柄private $sftp = NULL;/*** 构造函数.*/public function __construct(){$sftp_config = array("host" => "", // SFTP服务器ip地址"username" => "", // SFTP服务器用户名"password" => "", ...

PHP + webuploader 视频上传

上传方式，PHP默认方式和 FTP 上传 1、修改PHP 配置：php.ini 修改以下配置项为适合的数据php中 php.ini 文件修改file_uploads = On //允许文件上传upload_tmp_dir = "E:/fileuploadtmp" //暂存空间upload_max_filesize = 100M //上传文件最大的容量post_max_size = 120M //上传数据的最大容量max_execution_time = 600 //最长执行时间（秒）max_input_time = 600 //上传持续的最长时间（秒） memory_limit = 256M //内存大小 m...

ThinkPHP使用心得分享-上传类UploadFile的使用

上传类的使用很简单，如果是第一次使用上传功能的朋友需要注意的是html提交表单中的表单属性要加上 enctype属性，如：复制代码代码如下: <form method="post" action="upload.php" enctype="multipart/form-data"> <input type=‘file‘ name=‘file‘> <input type=‘submit‘ value=‘提交‘> </form>ThinkPHP的UploadFile类在文件../ThinkPHP/Extend/Library/ORG/Net/UploadFile.class.php中:复制代码代码如下: //引入...

[php基础]PHP.INI配置:文件上传功能配置教程

昨天分享了在PHP网站开发中如何在php.ini中配置实现session功能的PHP教程，今天继续分享在利用PHP实现文件上传功能时几点关键php.ini的配置。　　说到在php.ini中的文件上传的配置，其实在之前介绍PHP文件上传功能代码实例教程以及Jquery AjaxUpload实现文件上传功能代码实例教程时我都有所提及。PHP文件上传功能配置主要涉及php.ini配置文件中的upload_tmp_dir、upload_max_filesize、post_max_size等选项。php.ini中文件上传功能...

SugarCRM安装过程——PHP文件上传限制问题

找到D:\xampp\php目录下，php文件中的php.ini文件，用写字板打开： 1、查找post_max_size，指通过表单POST给PHP的所能接收的最大值，包括表单里的所有值，默认为8M，看你自己需要进行改变。2、查找File Uploads，首先确认file_uploads = on ;是否允许通过HTTP上传文件的开关，默认为ON即是开。 upload_tmp_dir ;3、查找upload_max_filesize ;即允许上传文件大小的最大值。默认为2M。4、如果要上传>8M的文件，那么只设置上述四项还不...

PHP多文件上传操作【代码】【图】

在前一篇文章里讲到了关于PHP文件上传原理和简单操作举例是单文件上传。http://www.cnblogs.com/lichenwei/p/3879566.html其实多文件上传和单文件上传大同小异，原理都是一样的，只是在代码上做了点小技巧。首先还是index.html上传表单，只是把之前上传文件表单里的file更改成了file[]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="h...

php上传图片模范代码【代码】

1 [php] view plaincopyprint?2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 3 4 <?php 5/****************************************************************************** 6 7参数说明: 8$max_file_size : 上传文件大小限制, 单位BYTE 9$destination_folder : 上传文件路径 10$watermark : 是否附加水印(1为加水印,其他为不加水印); 11 12使用说明: 131. 将PHP.INI文件里面的"extension=php...

win、mac 设置 php上传文件大小限制【代码】【图】

修改php.iniwin平台WAMP修改步骤左键点击wamp选择php在弹出的窗口中选择php.ini在打开的文件中进行修改(修改步骤如下)修改完毕,保存并重启wampmac MAMP步骤File------Edit Template-------php选择自己的版本即可修改内容使用文本编辑工具的搜索功能找到下列选项进行修改设置文件最大上传限制(值的大小可以根据需求修改)file_uploads = On ; 是否允许上传文件 On/Off 默认是On upload_max_filesize = 32M ; 上传文件的最...

PHP设计超级好用的文件上传处理类一（37）【代码】

<?phpclass FileUpload {private $filepath; //指定上传文件保存的路径private $allowtype=array(‘gif‘, ‘jpg‘, ‘png‘, ‘jpeg‘); //充许上传文件的类型private $maxsize=1000000; //允上传文件的最大长度 1Mprivate $israndname=true; //是否随机重命名， true false不随机，使用原文件名private $originName; //源文件名称private $tmpFileName; //临时文件名private $fileType; //文件类型private $fileSize...

php限制上传文件类型并保存上传文件的方法【代码】

本文实例讲述了php限制上传文件类型并保存上传文件的方法。分享给大家供大家参考。具体如下：下面的代码演示了php中如何获取用户上传的文件，并限制文件类型的一般图片文件，最后保存到服务器 <?php $allowedExts = array("gif", "jpeg", "jpg", "png"); $extension = end(explode(".", $_FILES["file"]["name"])); if ((($_FILES["file"]["type"] == "image/gif") || ($_FILES["file"]["type"] == "image/jpeg") || ($_FILES["fil...

[转]考虑 PHP 5.0~5.6 各版本兼容性的 cURL 文件上传【代码】

FROM : https://segmentfault.com/a/1190000000725185最近做的一个需求，要通过PHP调用cURL，以multipart/form-data格式上传文件。踩坑若干，够一篇文章了。重要警告没事不要读PHP的官方中文文档！版本跟不上坑死你！不同版本PHP之间cURL的区别PHP的cURL支持通过给CURL_POSTFIELDS传递关联数组（而不是字符串）来生成multipart/form-data的POST请求。传统上，PHP的cURL支持通过在数组数据中，使用“@+文件全路径”的语法附加文件，...

php 图片上传类代码

先来个简单的：复制代码代码如下:<? //http://www.jb51.net class upLoad{ public $length; //限定文件大小 public $file; //判断此类是用于图片上传还是文件上传 public $fileName; //文件名 public $fileTemp; //上传临时文件 public $fileSize; //上传文件大小 public $error; //上传文件是否有错,php4没有 public $fileType; //上传文件类型 public $directory; // public $maxLen; public $errormsg; function __construct(...

JQuery AJAX + PHP 上传多个附件到服务器

1. 创建一个表单，添加两个附件框<form id="newtopic" > <input type="file" name="att1" > <br /> <input type="file" name="att2" > <br /> <button id="submitBtn" >Submit 提交</button></form> 2. 为按钮创建AJAX单击事件，执行后表单中的附件会上传到服务器的全局变量$_FILES中 $(‘#submitBtn‘).click(function(){ //获取表单数据 var formdata=new FormData($("#newtopic")[0]); $.aj...

PHP文件上传主要代码讲解

导读：在php开发过程中，文件上传也经常用到，这里简单介绍下。在php开发过程中，文件上传也经常用到，这里简单介绍下。代码如下：<?php if($_FILES[‘myfile‘][‘name‘]!=‘‘){if($_FILES[‘myfile‘][‘error‘]> 0){echo "错误状态：".$_FILES[‘myfile‘][‘error‘];} else {move_uploaded_file($_FILES[‘myfile‘][‘tmp_name‘],"uploads/".$FILES[‘myfile‘][‘name‘]);echo "<script>alert(上传成功！);</script>...

PHP - 技术教程分类

PHP 教程 PHP 简介 PHP 安装 PHP 语法 PHP 变量 PHP echo/print PHP EOF(heredoc) PHP 数据类型 PHP 类型比较 PHP 常量 PHP 字符串 PHP 运算符 PHP If...Else PHP Switch PHP 数组 PHP 数组排序 PHP 超级全局变量 PHP While 循环 PHP For 循环 PHP 函数 PHP 魔术常量 PHP 命名空间 PHP 面向对象 PHP 测验 PHP 表单 PHP 表单验证 PHP 表单 - 必需字段 PHP 完整表单实例 PHP $_GET 变量 PHP $_POST 变量 PHP 多维数组 PHP 日期 PHP 包含 PHP 文件 PHP 文件上传 PHP Cookie PHP Session PHP E-mail PHP Error PHP Exception PHP 过滤器 PHP 7 新特性 PHP MySQL 简介 PHP MySQL 连接 PHP MySQL 创建数据库 PHP MySQL 创建数据表 PHP MySQL 插入数据 PHP MySQL 插入多条数据 PHP MySQL 预处理语句 PHP MySQL 读取数据 PHP MySQL Where PHP MySQL Order By PHP MySQL Update PHP MySQL Delete PHP ODBC AJAX 简介 AJAX PHP AJAX 数据库 AJAX 实时搜索 AJAX 投票 PHP Array PHP Calendar PHP cURL PHP Date PHP Directory PHP Error PHP Filesystem PHP Filter PHP FTP PHP HTTP PHP Mail PHP Math PHP Misc PHP MySQLi PHP PDO PHP String PHP Zip PHP Timezones PHP 图像处理 PHP RESTful PHP PCRE PHP 可用的函数 PHP Composer php 全部

PHP - 最热教程

php如何取出数组的前几个元素 PHP变量什么时候释放 PHP如何实现在数据库随机获取几条记录如何解决php base64解码乱码 php主要用于哪些领域 Laravel 批量插入(insert)数据六款国内优秀免费wordpress主题推荐 React如何从后端获取数据并渲染到前端？纯PHP实现定时器任务（Timer），php实现...php该如何安装pdo_mysql扩展

首页 / PHP / php + WebUploader实现图片批量上传功能

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

内容导读

内容图文

内容总结

内容备注

内容手机端

【php + WebUploader实现图片批量上传功能】教程文章相关的互联网学习教程文章

PHP上传文件【代码】

PHP ssh链接sftp上传下载【代码】

PHP + webuploader 视频上传

ThinkPHP使用心得分享-上传类UploadFile的使用

[php基础]PHP.INI配置:文件上传功能配置教程

SugarCRM安装过程——PHP文件上传限制问题

PHP多文件上传操作【代码】【图】

php上传图片模范代码【代码】

win、mac 设置 php上传文件大小限制【代码】【图】

PHP设计超级好用的文件上传处理类一（37）【代码】

php限制上传文件类型并保存上传文件的方法【代码】

[转]考虑 PHP 5.0~5.6 各版本兼容性的 cURL 文件上传【代码】

php 图片上传类代码

JQuery AJAX + PHP 上传多个附件到服务器

PHP文件上传主要代码讲解

PHP - 相关标签

WEB - 相关标签

PHP - 技术教程分类

PHP - 最新教程

PHP - 最热教程