WebUploader is a simple modern file upload component developed by the Baidu WebFE (FEX) team, mainly based on HTML5 and supplemented by FLASH. Below, I will demonstrate the usage of the jquery WebUploader file upload component.

Using WebUploader, you can also upload files in batches, support thumbnails, and many other parameter options can be set, and multiple event methods can be called. You can customize the upload components you want as you like.

Next, I will use a picture upload example to explain how to use WebUploader.

HTML

We first load the css and related js files.

<link rel="stylesheet" type="text/css" href="css/webuploader.css">
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="js/webuploader.min.js"></script>

Then we need to prepare a button #imgPicker and a container #fileList to store the added file information list. Add the following code to the body:

<div id="uploadimg">
 <div id="fileList" class="uploader-list"></div>
 <div id="imgPicker">選擇圖片</div>
</div>

JAVASCRIPT

Create first Web Uploader example:

var uploader = WebUploader.create({
 auto: true, // 選完文件后，是否自動上傳
 swf: 'js/Uploader.swf', // swf文件路徑
 server: 'upload.php', // 文件接收服務(wù)端
 pick: '#imgPicker', // 選擇文件的按鈕。可選
 // 只允許選擇圖片文件。
 accept: {
 title: 'Images',
 extensions: 'gif,jpg,jpeg,bmp,png',
 mimeTypes: 'image/*'
 }
});

Then listen to the fileQueued event, that is, when a file is added, create an image preview through uploader.makeThumb.

uploader.on( 'fileQueued', function( file ) {
 var $list = $("#fileList"),
 $li = $(
  &#39;<div id="&#39; + file.id + &#39;" class="file-item thumbnail">&#39; +
  &#39;<img  src="/static/imghw/default1.png"  data-src="https://img.php.cn//upload/image/676/307/619/1481092301585310.jpg"  class="lazy"  alt="Detailed explanation of jquery component WebUploader file upload usage" >&#39; +
  &#39;<div class="info">&#39; + file.name + &#39;</div>&#39; +
  &#39;</div>&#39;
  ),
 $img = $li.find(&#39;img&#39;);
  
  
 // $list為容器jQuery實例
 $list.append( $li );
  
 // 創(chuàng)建縮略圖
 uploader.makeThumb( file, function( error, src ) {
 if ( error ) {
  $img.replaceWith(&#39;<span>不能預(yù)覽</span>&#39;);
  return;
 }
  
 $img.attr( &#39;src&#39;, src );
 }, 100, 100 ); //100x100為縮略圖尺寸
});

The last is the upload status prompt. When the file is uploaded, the upload is successful, the upload is failed, and the upload is completed respectively corresponds to the uploadProgress, uploadSuccess,
uploadError, and uploadComplete events.

// 文件上傳過程中創(chuàng)建進度條實時顯示。
uploader.on( 'uploadProgress', function( file, percentage ) {
 var $li = $( '#'+file.id ),
 $percent = $li.find('.progress span');
  
 // 避免重復(fù)創(chuàng)建
 if ( !$percent.length ) {
 $percent = $(&#39;<p class="progress"><span></span></p>&#39;)
  .appendTo( $li )
  .find(&#39;span&#39;);
 }
  
 $percent.css( &#39;width&#39;, percentage * 100 + &#39;%&#39; );
});
  
// 文件上傳成功，給item添加成功class, 用樣式標(biāo)記上傳成功。
uploader.on( &#39;uploadSuccess&#39;, function( file, res ) {
 console.log(res.filePath);//這里可以得到上傳后的文件路徑
 $( &#39;#&#39;+file.id ).addClass(&#39;upload-state-done&#39;);
});
  
// 文件上傳失敗，顯示上傳出錯。
uploader.on( &#39;uploadError&#39;, function( file ) {
 var $li = $( &#39;#&#39;+file.id ),
 $error = $li.find(&#39;div.error&#39;);
  
 // 避免重復(fù)創(chuàng)建
 if ( !$error.length ) {
 $error = $(&#39;<div class="error"></div>&#39;).appendTo( $li );
 }
  
 $error.text(&#39;上傳失敗&#39;);
});
  
// 完成上傳完了，成功或者失敗，先刪除進度條。
uploader.on( &#39;uploadComplete&#39;, function( file ) {
 $( &#39;#&#39;+file.id ).find(&#39;.progress&#39;).remove();
});

At this point, we have implemented a simple image upload example. Clicking "Select Image" will pop up the file selection dialog box. After selecting the image, the image upload process will be entered, and the corresponding abbreviation of the image will be displayed. The thumbnail appears in the list.

Commonly used option settings and event calls

Web Uploader provides a wealth of API option settings and event calls.

Commonly used event descriptions: