慕容的工作随笔

分享技术经验、创业副业经验、AI教程、精品素材等

webuploader教程

2019年7月25日 0条评论 367次阅读 0人点赞慕容

http://www.thinkphp.cn/topic/46521.html

<html>
<head>
<link rel="stylesheet" type="text/css" href="/new/public/static/webuploader.css">
</head>
<body>
<div id="uploader-demo">
<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>
<script type="text/javascript" src="/new/public/static/webuploader.js"></script>

<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');
}
}

更多精彩内容：各种AI课程、技能课程、黑科技软件、网站小程序源码、副业小项目、PPT模板等精品素材、电商课程、推广引流课程等，尽在天边资源网。

发表回复