webuploader

近日項目中用到了百度的圖片上傳插件。有不少人第一次估計不知道應該如何使用,下面詳細介紹如何將webuploader引入到項目中:javascript

單次支持最大上傳300張圖片,不得不說功能強大。css

官網下載地址:http://fex.baidu.com/webuploader/html

下載下來解壓後你會看到以下文件java

直接將這個文件夾丟在項目中public/admin/webuploader下jquery

官網說了咱們須要引入web

  1.  
    <!--引入CSS-->
  2.  
    <link rel="stylesheet" type="text/css" href="webuploader文件夾/webuploader.css">
  3.  
     
  4.  
    <!--引入JS-->
  5.  
    <script type="text/javascript" src="webuploader文件夾/webuploader.js"></script>
  6.  
     
  7.  
    <!--SWF在初始化的時候指定,在後面將展現-->

 

而後你還須要一個HTML容器來選擇須要上傳的圖片網絡

 

  1.  
    <div id="wrapper">
  2.  
    <div id="container">
  3.  
    <!--頭部,相冊選擇和格式選擇-->
  4.  
    <div id="uploader">
  5.  
    <div class="queueList">
  6.  
    <div id="dndArea" class="placeholder">
  7.  
    <div id="filePicker"></div>
  8.  
    <p>或將照片拖到這裏,單次最多可選300張</p>
  9.  
    </div>
  10.  
    </div>
  11.  
    <div class="statusBar" style="display:none;">
  12.  
    <div class="progress">
  13.  
    <span class="text">0%</span>
  14.  
    <span class="percentage"></span>
  15.  
    </div><div class="info"></div>
  16.  
    <div class="btns">
  17.  
    <div id="filePicker2"></div><div class="uploadBtn">開始上傳</div>
  18.  
    </div>
  19.  
    </div>
  20.  
    </div>
  21.  
    </div>
  22.  
    </div>

當你將上述CSS,JS,HTML引入項目中後可能會出現頁面無任何顯示的狀況,這時候你須要這樣作(注意jquery.js與webuploader.js的引入順序)app

 

你或許會好奇SWF文件沒有引入,其實SWF文件在upload.js裏面進行了引入

ui

接下來貼出所有代碼:(這是批量上傳,官網演示的其餘上傳類型同理)spa

 

  1.  
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2.  
    <html lang="en">
  3.  
    <head>
  4.  
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  5.  
    <title>WebUploader演示</title>
  6.  
    <link rel="stylesheet" type="text/css" href="//你的路徑webuploader.css" />
  7.  
    <link rel="stylesheet" type="text/css" href="//你的路徑webuploader/examples/image-upload/style.css" />
  8.  
    </head>
  9.  
    <body>
  10.  
    <div id="wrapper">
  11.  
    <div id="container">
  12.  
    <!--頭部,相冊選擇和格式選擇-->
  13.  
    <div id="uploader">
  14.  
    <div class="queueList">
  15.  
    <div id="dndArea" class="placeholder">
  16.  
    <div id="filePicker"></div>
  17.  
    <p>或將照片拖到這裏,單次最多可選300張</p>
  18.  
    </div>
  19.  
    </div>
  20.  
    <div class="statusBar" style="display:none;">
  21.  
    <div class="progress">
  22.  
    <span class="text">0%</span>
  23.  
    <span class="percentage"></span>
  24.  
    </div><div class="info"></div>
  25.  
    <div class="btns">
  26.  
    <div id="filePicker2"></div><div class="uploadBtn">開始上傳</div>
  27.  
    </div>
  28.  
    </div>
  29.  
    </div>
  30.  
    </div>
  31.  
    </div>
  32.  
    <script type="text/javascript" src="//你的路徑webuploader/examples/image-upload/jquery.js"></script>
  33.  
    <script type="text/javascript" src="//你的路徑webuploader/dist/webuploader.js"></script>
  34.  
    <script type="text/javascript" src="//你的路徑webuploader/examples/image-upload/upload.js"></script>
  35.  
    </body>
  36.  
    </html>

演示效果以下:

 

支持旋轉和刪除和上傳前的預覽

固然有小夥伴可能會問上傳的路由在哪裏,以下,upload.js140行左右。只須要將server改爲你的目標路由就好啦

在上傳時咱們能夠打開網絡控制檯

 

咱們能夠看到請求裏面包含了上傳圖片的MIME類型與圖片類型以及form-data屬性name=file。name在控制器裏咱們只須要一句代碼就能夠接收到上傳過來的圖片,從而進行後續操做

 

$file = request()->file('file');
相關文章
相關標籤/搜索