jquery component Webuploader File upload usage detailed

This article mainly for you in detail the jquery component Webuploader file upload usage, with a certain reference value, interested in small partners can refer to

Webuploader is a simple HTML5-based, flash-supplemented modern file upload component developed by the Baidu Webfe (FEX) team, which shows you how to use the jquery webuploader file Upload component.

With Webuploader you can also batch upload files, support thumbnails and many other parameter options can be set, as well as multiple event methods can be called, you can customize the upload component you want.

Then I upload an example to show you how to use Webuploader.

Html

We will first load the CSS and related JS files.

?

123	<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 to hold the added file information list #filelist, add the following code to the body:

?

1234	<div id="uploadimg">  <div id="fileList" class="uploader-list"></div>  <div id="imgPicker">选择图片</div> </div>

Javascript

First create the Web uploader instance:

?

123456789101112

var uploader = WebUploader.create({  auto: true, // 选完文件后，是否自动上传  swf: ‘js/Uploader.swf‘, // swf文件路径  server: ‘upload.php‘, // 文件接收服务端  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 a preview of the image by Uploader.makethumb.

?

123456789101112131415161718192021222324

uploader.on( ‘fileQueued‘, function( file ) {  var $list = $("#fileList"),  $li = $(  ‘<div id="‘ + file.id + ‘" class="file-item thumbnail">‘ +  ‘‘ +  ‘<div class="info">‘ + file.name + ‘</div>‘ +  ‘</div>‘ ),  $img = $li.find(‘img‘);    // $list为容器jQuery实例  $list.append( $li );   // 创建缩略图  uploader.makeThumb( file, function( error, src ) {  if ( error ) {  $img.replaceWith(‘<span>不能预览</span>‘);  return;  }   $img.attr( ‘src‘, src );  }, 100, 100 ); //100x100为缩略图尺寸 });

The last is the upload status prompt, when the file upload process, upload success, upload failed, upload completed are respectively corresponding to uploadprogress, uploadsuccess,
Uploaderror, Uploadcomplete event.

?

1234567891011121314151617181920212223242526272829303132333435363738

// 文件上传过程中创建进度条实时显示。 uploader.on( ‘uploadProgress‘, function( file, percentage ) {  var $li = $( ‘#‘+file.id ),  $percent = $li.find(‘.progress span‘);   // 避免重复创建  if ( !$percent.length ) {  $percent = $(‘<p class="progress"><span></span></p>‘)  .appendTo( $li )  .find(‘span‘);  }   $percent.css( ‘width‘, percentage * 100 + ‘%‘ ); });   // 文件上传成功，给item添加成功class, 用样式标记上传成功。 uploader.on( ‘uploadSuccess‘, function( file, res ) {  console.log(res.filePath);//这里可以得到上传后的文件路径  $( ‘#‘+file.id ).addClass(‘upload-state-done‘); });   // 文件上传失败，显示上传出错。 uploader.on( ‘uploadError‘, function( file ) {  var $li = $( ‘#‘+file.id ),  $error = $li.find(‘div.error‘);   // 避免重复创建  if ( !$error.length ) {  $error = $(‘<div class="error"></div>‘).appendTo( $li );  }   $error.text(‘上传失败‘); });  // 完成上传完了，成功或者失败，先删除进度条。 uploader.on( ‘uploadComplete‘, function( file ) {  $( ‘#‘+file.id ).find(‘.progress‘).remove(); });

Here, we have implemented a simple image upload instance, click "Select Picture" will pop up the file selection dialog, when the image is selected, that is, the upload image process, the image corresponding to the thumbnail of the reality in the list.

Common option settings and event invocation

Web Uploader provides a rich set of API options and event calls.

Common Event Descriptions:

For more exciting content, please click on "jquery Upload operations Summary", "Ajax Upload Technology summary" for in-depth study and research.

JQuery component Webuploader File upload usage detailed