Baidu Upload plugin WEB uploader tutorial _web uploader use Demo instance

Webuploader is developed by the Baidu Webfe (FEX) team A simple HTML5-based, flash supplemented by modern file upload components, in the modern browser can give full play to the advantages of HTML5, while not abandoning the mainstream Internet Explorer, Using the original Flash runtime, compatible with IE6, IOS 6, Android 4, two sets of runtime, the same call mode, can be arbitrarily selected by the user, the use of large file fragments concurrent upload, greatly improve the file upload efficiency

ii. Advantages of WEB uploader

1. sharding, concurrency

The combination of sharding and concurrency, the splitting of a large file into chunks, concurrent uploads, greatly improving the upload speed of large files, when the network problem caused transmission errors, only need to re-transmit the wrong shard, not the entire file, the other shard transfer can be more real-time tracking upload progress

2. Preview, compress

Support Common image formats Jpg,jpeg,gif,bmp,png preview and compress, save network data transfer, parse meta information in JPEG, correct processing for various orientation, and compress all original meta data after compressing and uploading preserved images.

3. Multiple ways to add files

Support File Multi-Select, type Filter, drag (file & folder), image pasting function, paste function is mainly reflected in when there is picture data in the Clipboard (screen tool such as QQ (Ctrl ALT A), the page right click on the image click Copy), Ctrl v can add this picture file

4, HTML5 & FLASH

Compatible with mainstream browsers, consistent interfaces, two runtime support implementations, no need to worry about internal cores, flash parts without UI-related work, user extensions and custom business needs that don't care about flash

5, MD5 second transmission

When the file size is large, the amount of time, to support the upload before the file MD5 value verification, the same can be skipped directly, if the server and the front-end unified modification algorithm, take segment MD5, can greatly improve the performance of verification, time-consuming around 20ms

6, easy to expand, can be divided

Use a detachable mechanism to separate functions into small components, freely paired with AMD code organization, clarity, and convenience for advanced player expansion

third, image upload (with preview) how to use

1. Introduction of resources

Using Web Uploader file uploads requires the introduction of three resources: JS, CSS, SWF

<!--introduced css-->
<link rel= "stylesheet" type= "Text/css" href= "Webuploader folder/webuploader.css" >
<!--introduced js-->
<script type= "Text/javascript" src= "Webuploader folder/webuploader.js" ></script>
<!--SWF is specified at initialization time and will be displayed later--

2. HTML code

First you need to prepare a button, and a container to hold the list of added file information

<!--DOM Structure section---
<div id= "Uploader-demo" >
    <!--for storing item-->
    <div id= "FileList" class = "Uploader-list" ></div>
    <div id= "Filepicker" > select picture </div>
</div>

3. Javascript

Create a Web uploader instance

//Initialize Web Uploader var Uploader = webuploader.create ({//If the file is selected, it is automatically uploaded.
    Auto:true,//swf file path Swf:base_url´/js/uploader.swf´,//File receive service side. Server:´http://webuploader.duapp.com/server/fileupload.php´,//Select the File button.
    Optional.
    The internal is created according to the current run, either the INPUT element or flash.
    Pick:´ #filePicker ´,//Allow only image files to be selected. Accept: {Title:´images´,