多文件上传的插件常用的有:
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为例) 可以多文件多图片大文件上传
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比较好用,具体在项目中使用,看需要了。
欢迎关注技术开发分享录:http://fenxianglu.cn/