Baidu Upload Plugin Web Uploader

Webuploader is a simple HTML5-based, flash-supplemented modern file upload component developed by the Baidu Webfe (FEX) team. In the modern browser can give full play to the advantages of HTML5, while not abandoning the mainstream Internet Explorer, the original Flash runtime, compatible with Ie6+,ios 6+, Android 4+. Two sets of runtime, the same call mode, can be used by the user arbitrary choice.

Using large file fragment concurrent upload, greatly improve the efficiency of file upload

sharding, concurrency

With the combination of sharding and concurrency, a large file is divided into multiple blocks, and concurrent uploads, greatly improving the upload speed of large files.

When a network problem causes a transmission error, you only need to re-transmit the wrong shard, not the entire file. In addition, the Shard transfer can track the upload progress more in real time.

Preview, Compress

Support Common image format Jpg,jpeg,gif,bmp,png preview and compression, save network data transmission.

Parse the meta information in JPEG, do the correct processing for various orientation, and upload all the original meta data of preserving picture after compressing.

Multiple ways to add files

Support File Multi-Select, type Filter, drag (file & folder), image pasting function.

The 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.

HTML5 & FLASH

Compatible with the mainstream browser, the interface is consistent, two sets of runtime support are realized, the user does not need to care about what kernel is used internally.

While the Flash section does not do any UI-related work, it is convenient to not care about flash users to expand and customize business requirements.

MD5 Second Pass

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 service end and front-end unified modification algorithm, take segment MD5, can greatly improve the verification performance, time-consuming around 20ms.

Easy to expand and split

Using a detachable mechanism, each function is separated into a small component, which can be freely paired.

Use the AMD specification to organize your code to be clear and easy for advanced players to expand.

Usage HTML:

<div id= "uploader" class= "wu-example" style= "text-align:center;margin-top:20px;" >
<div id= "thelist" class= "Uploader-list" ></div>
<div class= "Btns" >
<div id= "Picker" > click here <br/>
Select the video you want to upload
</div>
</div>
</div>

Js:

var uploader = webuploader.create ({
Auto:true,//set to True, do not need to manually call the upload, there is a file selection to start uploading.
SWF file path
SWF: '.. /js/uploader.swf ',
The file receives the service side.
Server: ' URL ',
The internal is created according to the current run, either the INPUT element or flash.
Pick: {
ID: ' #picker ',
Multiple:false
},
Chunkretry:false,
filenumlimit:1,//allow uploading of files
FILESIZELIMIT:100 * 1024 * 1024,//Verify that the total file size exceeds the limit and the queue is not allowed.
FILESINGLESIZELIMIT:100 * 1024 * 1024,//Verify that the individual file size exceeds the limit and is not allowed to join the team
Do not compress the image, the default if it is JPEG, file upload will be compressed before uploading!
Resize:false,
Only video or image file files are allowed to be selected.
accept:{
Title: ' Videos ',//images
Mimetypes: ' video/* '//images/*
}
});

The main parameters are added here

$ (' #ctlBtn '). Click (function () {

Uploader.options.formData.random = random;
Uploader.options.formData.price = amount;
Uploader.retry ();
});

Here to deal with some of the plugin API, to see the need to use

When a file is added to the queue because Webuploader does not handle UI logic, it needs to be monitored for filequeued events.
Uploader.on (' filequeued ', function (file) {

$list = $ (' #thelist ');
var $li = $ (
' <div id= ' + file.id + ' "class=" file-item thumbnail "style=" margin:20px 0 "> ' +
' ' +
' <div class= ' info ' > ' + file.name + ' </div> ' +
' <div class= ' state ' style= ' color:red; > ' +sizebig (file.size) + ' </div> ' +
' <p class= ' state ' style= ' color:red; > Wait for upload </p> ' +
' </div> '
),
$img = $li. Find (' img ');
$list as a container jquery instance
$list. Append ($li);

Create a thumbnail image
If you are not a picture file, you can not call this method.
Thumbnailwidth x thumbnailheight to 100 x
Uploader.makethumb (file, function (Error, SRC) {
if (Error) {
$img. ReplaceWith (' <span> video files </span> ');
Return
}
$img. attr (' src ', src);
}, 100, 100);
});
File upload Progress file crosses, the Web uploader will dispatch the Uploadprogress event, which contains the file object and the current upload progress of the file.
Create a progress bar in real-time display during file upload.
Uploader.on (' uploadprogress ', function (file, percentage) {
var $li = $ (' # ' +file.id),
$percent = $li. Find ('. Barcontainer. Bar ');
Avoid duplicate creation
if (! $percent. Length) {
$percent = $ (' <div class= "Barcontainer" ><div class= "bar" style= "width:100%" ></div></div> "). AppendTo ($li). Find ('. Bar ');
}

$li. Find (' p.state '). Text (' in-upload ');

$percent. HTML ((percentage *). toFixed (2) + '% ');
Myc.showprogress ({
Title: ' Uploading ',
Text: (percentage *). toFixed (2) + '% '
});
if (percentage*100 = = 100) {}
});

File upload succeeded, add success class to item, upload success with style tag.
Uploader.on (' uploadsuccess ', function (file, response) {
$ (' # ' +file.id). Find (' p.state '). Text (' uploaded ');
if (response.success) {
var timeajax = 60;
Repeat (Timeajax,response.key);
}else{
Myc.toast ({
msg: ' Upload error, please re-upload '
});
}
});

File upload failed, display upload error.
Uploader.on (' Uploaderror ', function (file) {
$ (' # ' +file.id). Find (' p.state '). Text (' Upload error, please re-upload ');
Myc.toast ({
msg: ' Upload error, please re-upload '
});
});

Finished uploading, success or failure, first delete the progress bar.
Uploader.on (' uploadcomplete ', function (file) {
Uploader.on (' Error ', function (file) {
if (file = = ' Q_exceed_size_limit ') {
Myc.toast ({
msg: ' Can't upload more than 100M video '
});
return false;
}
if (typeof (file) = = ' object ') {
Myc.toast ({
Msg:JSON.stringify (file)
});
}else{
Myc.toast ({
Msg:file
});
}
});
Only one video file can be uploaded
Uploader.on (' Error ', function (file) {

if (file== "Q_exceed_num_limit") {
Myc.alert ({
Msg: ' You have set up the uploaded file '
});
return false;
}else if (file== "q_type_denied") {
Myc.alert ({
Msg: ' Does not support this video format '
});
return false;
}
});

Summary: There are some code is a personal package plug-in, in the bottle, you can take a closer look at the website AIP Link: http://fex.baidu.com/webuploader/doc/index.html

Baidu Upload Plugin Web Uploader