這個插件對后端程序員相當友好，無論是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