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的官方网址。希望大家多多留言交流指正。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对我们的支持。
相关推荐
-
关于webuploader插件使用过程遇到的小问题
本文为大家解决webuploader上传插件如何自定义参数的问题,供大家参考,具体内容如下 大致架构: 前端:html5+ajax 后端:java (struts框架相关) 碰到问题: 后台coder给我提供一个接口./file/uploader.do?upFile=?,让我上传文件对应upFile这个参数,前端使用的是webuploader这个上传插件,并不知道这个东西怎么自定义参数.经过各种google,百度,找到以下两种解决方案: 1.接口不需要指明参数,直接用request.getInp
-
使用WebUploader实现上传文件功能（一）
写在前面: 文件上传方式很多的,对于大文件的上传,在本次项目中也有涉及,主要是用了分片断点上传大文件.所以就去了解了一下WebUploader,先从简单的上传文件开始吧. 在代码中写注释,这样看的比较好点,那就直接上代码来看了解实现的过程吧. 前台jsp页面: <%@ page contentType="text/html;charset=UTF-8" language="java" %> <% String scheme = request.ge
-
使用WebUploader实现分片断点上传文件功能（二）
写在前面: 这几天,有去研究一下WebUploader上传文件,前面的博客有记录下使用WebUploader简单上传文件的例子,今天就把分片断点上传的例子也记录下吧,在博客园中,也查看了一些资料,基本上后台处理数据都是用的Servlet,或者是SpringMVC,由于最近的项目一直都是Struts2,所以这里就用Struts2中的action来对数据进行处理,达到分片上传文件的效果. 1.什么是分片上传? 顾名思义,就是把文件分成一片片,即让一个文件,分割成好几个小文件,然后再上传.这样做的好处
-
webuploader 实现图片批量上传功能附实例代码
1.导入资源 2.JSP代码 <div class="page-container"> <div class="row cl"> <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>项目名称:</label> <div class="formCont
-
webuploader实现上传图片到服务器功能
本文为大家分享了webuploader实现上传图片到服务器的具体代码,供大家参考,具体内容如下 效果图: 一.引入资源文件 1.1 引入webuploader.css文件 <!--引入CSS--> <link rel="stylesheet" type="text/css" href="../../css/plugins/webuploader/webuploader.css" > 1.2 引入webuploader.mi
-
百度多文件异步上传控件webuploader基本用法解析
双核浏览器下在chrome内核中使用uploadify总有302问题,也不知道如何修复,之所以喜欢360浏览器是因为帮客户控制渲染内核: 若页面需默认用极速核,增加标签:<meta name="renderer" content="webkit"/> 若页面需默认用ie兼容内核,增加标签:<meta name="renderer" content="ie-comp"/> 若页面需默认用ie标准
-
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
涉及到网页图片的交互,少不了图片的压缩上传,相关的插件有很多,相信大家都有用过,这里我就推荐三款,至于好处就仁者见仁喽: 1.名气最高的WebUploader,由Baidu FEX 团队开发,以H5为主,FLASH为辅,兼容 IE6+,iOS 6+, android 4+,采用大文件分片并发上传,极大的提高了文件上传效率,看了官方文档就知道,能满足你所需要的所有功能,一言以蔽之,大而全:至于缺点,大概就是插件体积太大了,自带样式文件,而且还要依赖jquery类库.详细的教程网上俯拾即是,这里我就
-
快速掌握jQuery插件WebUploader文件上传
文件上传是网站和 Web 应用程序的常用功能,一直没有一款完美的文件上传组件,因此让很多开发人员碰到头疼的浏览器兼容问题. WebUploader 是由 Baidu FEX 团队开发的一款以 HTML5 为主,FLASH 为辅的现代文件上传组件.在现代的浏览器里面能充分发挥 HTML5 的优势,同时又不摒弃主流IE浏览器,沿用原来的 FLASH 运行时,兼容 IE6+,iOS 6+, android 4+.采用大文件分片并发上传,极大的提高了文件上传效率. 参考百度官网进行学习借鉴,整理,具体内
-
webuploader模态框ueditor显示问题解决方法
webuploader 模态框 ueditor 显示问题 模态框z-index 对应的值 .modal { z-index: 10050 !important; outline: none !important; } 遮罩层对应的z-index值 .modal-backdrop { border: 0 !important; outline: none !important; z-index: 10049 !important; } ueditor 插件中,默认的z-index值为900 : 在
-
webuploader分片上传的实现代码（前后端分离）
本文介绍了webuploader分片上传的实现代码(前后端分离),分享给大家,具体如下: WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,沿用原来的FLASH运行时,兼容IE6+,iOS 6+, android 4+.两套运行时,同样的调用方式,可供用户任意选用.采用大文件分片并发上传,极大的提高了文件上传效率.(这个是从官网上直接copy的