WebUploader之多图上传
1.引入资源
传送门：http://fex.baidu.com/webuploader/
使用Web Uploader文件上传需要引入三种资源：JS, CSS, SWF。
<!--引入CSS--> <link rel="stylesheet" type="text/css" href="webuploader文件夹/webuploader.css"> <!--引入JS--> <script type="text/javascript" src="webuploader文件夹/webuploader.js"></script> <!--SWF在初始化的时候指定，在后面将展示-->
2.html代码
<div class="layui-form-item">
<label for="username" class="layui-form-label">
<span class="x-red">*</span>多图:</label>
<div class="layui-input-block">
<div id="uploader-demo">
<!--用来存放item-->
<div id="fileList" class="uploader-list"></div>
<div id="filePicker1">选择图片</div>
<br/>
<div class="formControls col-xs-offset-4" id="imgss2"></div>
</div>
</div>
</div>
3.js代码
<script>
// 初始化Web Uploader
var uploader1 = WebUploader.create({
// 选完文件后，是否自动上传。
auto: true,
// swf文件路径
swf: '__ADMIN__/lib/webuploader/Uploader.swf',
// 文件接收服务端。
server: "{:url('/admin/lecturerImg')}",
// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick: '#filePicker1',
// 只允许选择图片文件。
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*',
size: '1048576',
}
});
uploader1.on('fileQueued',
function() {
$('#imgss2').html('');
});
// 文件上传成功，给item添加成功class, 用样式标记上传成功。
uploader1.on('uploadSuccess',
function(file, data) {
if (data.status == 'fail') {
$('#imgss2').html('<span style="color:red">' + data.info + '</span>');
} else {
$('#imgss2').append('<img src=/' + data.info + ' style="width:150px;height:100px;margin-right:10px;margin-top:10px" ><input type="hidden" name="good_pic[]" value="' + data.info + '">');
}
});</script>
4.控制器上传代码
publicfunction lecturerImg(Request $request) {
$validate = Config: :get('lecturer.VALIDATE');//读取配置
$path = Config: :get('lecturer.ARTPATH');//读取地址
$file = $request - >file('file');
$res = $file - >validate($validate) - >move($path);
if ($res) {
$fileName = $res - >getPathName();
$data = ['status' = >'success', 'info' = >$fileName];
} else {
$data = ['status' = >'fail', 'info' = >$file - >getError()];
}
return json($data);
}
5.图片配置文件
<?php return [ 'VALIDATE'=>['ext'=>'jpg,png,jpeg,gif','size'=>2097152], 'ARTPATH'=>'uploads/lecturer' ] ?>
【注释】：
swf----引入这个插件地址
server----上传图片的地址
fileQueued--多图上传覆盖原来的
效果图：
