这个插件对后端程序员相当友好，无论是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 appindexcontroller; use thinkController; use thinkFile; 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