这个插件对后端程序员相当友好,无论是JAVA还是PHP,抑或python,基本只需要一句代码就能完成上传并且预览的效果,先上效果图,让你们眼馋一下
废话不说,直接撸代码,前端代码如下:
<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'); } }
撸完搞定,开森ING---------
thinkphp官网也有我本人写的文章,欢迎收藏。 http://www.thinkphp.cn/topic/46521.html