php + WebUploader实现图片批量上传功能
一.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的官方网址。希望大家多多留言交流指正。
- Python-执行系统命令
- css3 UI 修饰——回顾
- Windows Phone 7实战 第一天 设计启动页面和应用程序图标
- css3响应式布局设计——回顾
- Windows Phone 7 实战第二天 二维码QRcode
- Python-面向对象编程
- SQL Server 2012将与Hadoop无缝集成
- 系统性能优化一例
- Android中include标签的使用
- css3弹性盒子模型——回顾。
- confluence与jira账号对接、查看到期时间及问题总结
- 物联网、人工智能时代来临五大隐忧不可不提防
- Contact Manager Web API 示例[1]CRUD 操作
- 3个域名交易:fde.com11万被秒
- php概述
- php教程
- php环境搭建
- PHP书写格式
- php变量
- php常量
- PHP注释
- php数组
- php字符串 string
- PHP整型 integer
- PHP浮点型 float
- php布尔型
- php数据类型之数组
- php数据类型之对象
- php数据类型之null
- php数据类型之间的转换
- php运算符
- php表达式
- PHP循环控制
- PHP流程控制
- php函数
- php全局变量
- PHP魔术变量
- php命名空间
- php 日期
- PHP包含文件
- php文件
- PHP 文件上传
- php Cookies
- php Sessions
- php email
- php安全email
- php错误处理
- PHP异常处理
- php过滤器
- PHP 高级过滤器
- php json
- php 表单
- PHP MySQL 简介
- PHP 连接 MySQL
- php创建数据库
- php 创建表
- php mysq 插入数据
- PHP MySQL 插入多条数据
- PHP MySQL 预处理语句
- php mysql 读取数据
- php mysql where
- PHP MySQL Order By
- PHP MySQL Update
- PHP MySQL Delete
- php ODBC
- 10.带人机对战的五子棋程序
- Spring Boot、 Spring Cloud 、OAuth2 的RBAC 权限管理系统分享
- 完美解决个人微信音频amr文件与mp3格式互转
- 【学不动了系列】之 Deno 入门 什么是Deno安装DenoDeno运行时(Runtime)Deno标准库第三方模块
- SAUI-瀑布流改版(grid)
- 深入分析 Spring 基于注解的 AOP 实现原理
- 一连问了好几个大佬,竟然都不知道Redis为什么默认16个数据库?
- 03 Spring Boot 整合Druid
- 关于字符串切割空格
- CSS浮动知识
- 你敢信?四行Python代码就能知道你那的天气!
- Ribbon核心组件IRule及负载均衡算法
- CSS标签显示模式及单行文本
- CSS复合选择器
- CSS重要的盒子模型