这个插件对后端程序员相当友好，无论是JAVA还是PHP，抑或python,基本只需要一句代码就能完成上传并且预览的效果，先上效果图，让你们眼馋一下
image
废话不说，直接撸代码，前端代码如下：
<html>
<head>
<link rel="stylesheet" type="text/css" href="/new/public/static/webuploader.css"><!-- 引用插件css -->
</head>
<body>
<div id="uploader-demo">
<!--用来存放item-->
<div id="fileList" class="uploader-list">
</div>
<div id="filePicker">选择图片</div>
</div>
</body>
<script type="text/javascript" src="/new/public/static/jquery-3.1.1.js"></script> <!-- 引用jquery -->
<script type="text/javascript" src="/new/public/static/webuploader.js"></script> <!-- 引用插件js -->
<script type="text/javascript">
var $list=$("#fileList"); //这几个初始化全局的百度文档上没说明，好蛋疼
var thumbnailWidth = 100; //缩略图高度和宽度 （单位是像素），当宽高度是0~1的时候，是按照百分比计算，具体可以看api文档
var thumbnailHeight = 100;
var uploader = WebUploader.create({
// 选完文件后，是否自动上传。
auto: true,
// swf文件路径
swf: '/new/public/static/uploader.swf', //加载swf文件，路径一定要对
// 文件接收服务端。
server: '{:url("index/index/upload")}',
// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是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为容器jQuery实例
$list.append( $li );
// 创建缩略图
// 如果为非图片文件，可以不用调用此方法。
// thumbnailWidth x thumbnailHeight 为 100 x 100
uploader.makeThumb( file, function( error, src ) {
if ( error ) {
$img.replaceWith('<span>不能预览</span>');
return;
}
$img.attr( 'src', src );
}, thumbnailWidth, thumbnailHeight );
});
</script>
</html>
后端代码：
因为我是用的thinkphp5.0.7框架写的，里面封装了file类，就是完成文件的转移上传：
<?php
namespace app\index\controller;
use think\Controller;
use think\File;
class Index extends Controller
{
public function index()
{
return $this->fetch();
}
function upload(){
$file = $this->request->file('file');//file是传文件的名称，这是webloader插件固定写入的。因为webloader插件会写入一个隐藏input，不信你们可以通过浏览器检查页面
$info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
}
}
这样就搞定完事了
网友评论