[php] 3个多文件上传(uploadify、file upload、 webuploader)
多文件上传的插件常用的有：
1、jquery uploadify 下载【http://www.uploadify.com/download/】
2、jquery file upload 下载【https://github.com/blueimp/jQuery-File-Upload/tags】
3、webuploader 下载【http://fex.baidu.com/webuploader/download.html】
注：
在使用的时候，要参照官网的文档说明，如果看不明白，可以百度一下想知道的，必境我这里只是入门的小实例
一、jquery uploadify
该插件已经把文件写好了（index.php和uploadify.php），下载后改下上传路径就行了，这里没什么要讲的
二、jquery file upload 以Thinkphp为例 Home模块下的Index控制器
布局文件index.html：
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>文件上传</title>
<link rel="stylesheet" href="__PUBLIC__/bootstrap/bootstrap.min.css"/>
<script src="__PUBLIC__/jquery.min.js"></script>
<link rel="stylesheet" href="__PUBLIC__/jqupload/css/jquery.fileupload.css">
<link rel="stylesheet" href="__PUBLIC__/jqupload/css/jquery.fileupload-ui.css">
<script src="__PUBLIC__/jqupload/js/vendor/jquery.ui.widget.js"></script>
<script src="__PUBLIC__/jqupload/js/jquery.fileupload.js"></script>
<script src="__PUBLIC__/jqupload/js/jquery.iframe-transport.js"></script>
</head>
<body>
<div class="container">
<div class="row fileupload-buttonbar" style="padding-left:15px;">
<div class="thumbnail col-sm-6">
<div class="progress progress-striped active" role="progressbar" aria-valuemin="10" aria-valuemax="100" aria-valuenow="0"><div id="weixin_progress" class="progress-bar progress-bar-success" style="width:0%;"></div></div>
<div class="caption" align="center">
<span id="weixin_upload" class="btn btn-primary fileinput-button">
<span>上传</span>
<input type="file" id="weixin_image" name="weixin_image[]" data-url="__CONTROLLER__/uploadImg" multiple>
</span>
</div>
</div>
</div>
</div>
<script>
$(function() {
$("#weixin_image").fileupload({
dataType: 'json',
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i, // 文件上传类型 sequentialUploads: true, // 连续上传配置 add: function (e, data) {
//提交到服务器端 data.submit();
}
}).bind('fileuploadprogress', function (e, data) { // 绑定上传进度 var progress = parseInt(data.loaded / data.total * 100, 10);
$("#weixin_progress").css('width',progress + '%');
$("#weixin_progress").html(progress + '%');
}).bind('fileuploaddone', function (e, data) { // 上传完成处理 $("#weixin_upload").css({display:"none"});
$('.thumbnail').prepend('<img src="'+data.result+'" style="height:180px;margin-top:10px;margin-bottom:8px;" alt="图片" data-holder-rendered="true">');
});
});
</script>
</body>
</html>
Index控制器下的uploadImg方法
/* 文件上传处理 */ public function uploadImg(){
$upload = new \Think\Upload();// 实例化上传类 $upload->maxSize = 3145728 ;// 设置附件上传大小 //$upload->exts = array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型 $upload->rootPath = './Public/Uploads/'; // 设置附件上传根目录 $upload->savePath = ''; // 设置附件上传（子）目录 $upload->autoSub = false; // 关闭子目录 // 上传文件 $info = $upload->upload();
if(!$info) {// 上传错误提示错误信息 $this->error($upload->getError());
}else{// 上传成功 获取上传文件信息 $pathArr = array();
foreach($info as $file){
array_push($pathArr, "Public/Uploads/".$file['savepath'].$file['savename']);
}
echo json_encode($pathArr);
}
}
三、webuploader (也是以Thinkphp为例) 可以多文件多图片大文件上传
![[php] 3个多文件上传(uploadify、file upload、 webuploader)_第1张图片](http://img.e-com-net.com/image/info5/88162036e7dc4234ad825dadec734a59.jpg)
HTML布局：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>webuploader</title>
<link rel="stylesheet" href="__PUBLIC__/webuploader/webuploader.css"/>
<script src="__PUBLIC__/jquery.min.js"></script>
<script src="__PUBLIC__/webuploader/webuploader.js"></script>
<style>
* {
padding: 0;
margin: 0;
}
.progress {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 15px;
font-size: 12px;
color: #fff;
text-align: center;
line-height: 15px;
}
.uploader-list .file-item {
position: relative;
}
.progress span {
display: inline-block;
height: 100%;
background: #1C9F09;
}
</style>
</head>
<body>
<div id="uploader-demo">
<!--用来存放item--> <div id="fileList" class="uploader-list"></div>
<div id="filePicker">选择图片</div>
</div>
</body>
</html>
JS脚本：
<script>
// 图片上传demo jQuery(function() {
var $ = jQuery,
$list = $('#fileList'),
// 优化retina, 在retina下这个值是2 ratio = window.devicePixelRatio || 1,
// 缩略图大小 thumbnailWidth = 100 * ratio,
thumbnailHeight = 100 * ratio,
// Web Uploader实例 uploader;
// 初始化Web Uploader uploader = WebUploader.create({
// 自动上传。 auto: true,
// swf文件路径 swf: '__PUBLIC__/webuploader/Uploader.swf',
// 文件接收服务端。 server: '__CONTROLLER__/webuploader',
// 选择文件的按钮。可选。 // 内部根据当前运行是创建，可能是input元素，也可能是flash. pick: '#filePicker',
// 只允许选择文件，可选。 accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*' }
});
// 当有文件添加进来的时候 uploader.on( 'fileQueued', function( file ) {
var $li = $(
'<div id="' + file.id + '" class="file-item thumbnail">' + '<img>' + '<div class="info">' + file.name + '</div>' + '</div>' ),
$img = $li.find('img');
$list.append( $li );
// 创建缩略图 uploader.makeThumb( file, function( error, src ) {
if ( error ) {
$img.replaceWith('<span>不能预览</span>');
return;
}
$img.attr( 'src', src );
}, thumbnailWidth, thumbnailHeight );
});
// 文件上传过程中创建进度条实时显示。 uploader.on( 'uploadProgress', function( file, percentage ) {
var $li = $( '#'+file.id ),
$percent = $li.find('.progress span');
// 避免重复创建 if ( !$percent.length ) {
$percent = $('<p class="progress"><span></span></p>')
.appendTo( $li )
.find('span');
}
$percent.css( 'width', percentage * 100 + '%').text(percentage * 100+'%');
});
// 文件上传成功，给item添加成功class, 用样式标记上传成功。 uploader.on( 'uploadSuccess', function( file ) {
console.log(file);
$( '#'+file.id ).addClass('upload-state-done');
});
// 文件上传失败，现实上传出错。 uploader.on( 'uploadError', function( file ) {
var $li = $( '#'+file.id ),
$error = $li.find('div.error');
// 避免重复创建 if ( !$error.length ) {
$error = $('<div class="error"></div>').appendTo( $li );
}
$error.text('上传失败');
});
// 完成上传完了，成功或者失败，先删除进度条。 uploader.on( 'uploadComplete', function( file ) {
// $( '#'+file.id ).find('.progress').remove(); });
});
</script>
PHP代码：
public function webuploader() {
$upload = new \Think\Upload();// 实例化上传类 $upload->maxSize = 3145728 ;// 设置附件上传大小 $upload->exts = array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型 $upload->rootPath = './Public/Uploads/'; // 设置附件上传根目录 $upload->savePath = ''; // 设置附件上传（子）目录 $upload->autoSub = false; // 关闭子目录 // 上传文件 $info = $upload->upload();
if(!$info) {// 上传错误提示错误信息 $this->error($upload->getError());
}else{// 上传成功 获取上传文件信息 $pathArr = array();
foreach($info as $file){
array_push($pathArr, "Public/Uploads/".$file['savepath'].$file['savename']);
}
echo json_encode($pathArr);
}
}
个人感觉百度团队开发的webuploader比较好用，具体在项目中使用，看需要了。
谢谢关注！