Web upload uploading multiple picture instances

The first thing to do is refer to the Web upload plugin:

<link rel= "stylesheet" type= "Text/css" href= "Css/webuploader.css" >
<script type= "Text/javascript" src= "Js/jquery-1.8.3.min.js" ></script>
<script type= "Text/javascript" src= "Js/webuploader.min.js" ></script>

The main three files.
DEMO:
HTNL section:

<!--the DOM structure part--
<div id= "Uploader-demo" >
    <!--for storing item-->
    <div id= "fileList" class= "Uploader-list" ></div>
    <div id= "Filepicker" > select Picture </div>
</div>

JS section:

<script type= "Text/javascript" >
File Upload
Photo Upload Demo
JQuery (function () {
var $ = jQuery,
$list = $ (' #fileList '),
Optimize retina, under Retina This value is 2
Ratio = Window.devicepixelratio | | 1,
Thumbnail size
Thumbnailwidth = * ratio,
Thumbnailheight = * ratio,
Web Uploader Instances
Uploader
Initializing the web Uploader
Uploader = Webuploader.create ({
Automatically upload.
Auto:true,
SWF file path
SWF: '/js/webuploader/js/uploader.swf ',
The file receives the service side.
Server: '/doupload.do ',

[Default: ' File '] sets the name of the file upload domain.
Fileval: ' Upload ',

Select the button for the file. Optional.
The internal is created according to the current run, either the INPUT element or flash.
Pick: ' #filePicker ',

Only select files are allowed, optional.
Accept: {
Title: ' Images ',
Extensions: ' Gif,jpg,jpeg,bmp,png ',
Mimetypes: ' image/* '
}
});

When there are files to add in
Uploader.on (' filequeued ', function (file) {
var $li = $ (
' <div id= ' + file.id + ' "class=" File-item thumbnail "> ' +
'  ' +
' <div class= ' info ' > ' + file.name + ' </div> ' +
' </div> '
),
$img = $li. Find (' img ');

$list. Append ($li);

Create a thumbnail image
Uploader.makethumb (file, function (Error, SRC) {
if (Error) {
$img. ReplaceWith (' <span> cannot preview </span> ');
Return
}

$img. attr (' src ', src);
}, Thumbnailwidth, thumbnailheight);
});

Create a progress bar in real-time display during file upload.
Uploader.on (' uploadprogress ', function (file, percentage) {
var $li = $ (' # ' +file.id),
$percent = $li. Find ('. Progress span ');

Avoid duplicate creation
if (! $percent. Length) {
$percent = $ (' <p class= "Progress" ><span></span></p> ")
. AppendTo ($li)
. Find (' span ');
}

$percent. css (' width ', percentage * 100 + '% ');
});

File upload succeeded, add success class to item, upload success with style tag.
Uploader.on (' uploadsuccess ', function (file,data) {
var fileList = $.parsejson (callBack);//Convert to JSON object
Alert (' Upload success\n ' +data.name);
$ (' #uploader-demo '). Append (' <input type= "text" name= "FILEURL" value= "' +data.name+ '"/> ');
$ (' # ' +file.id). addclass (' Upload-state-done ');
});

File upload failed, real upload error.
Uploader.on (' Uploaderror ', function (file) {
var $li = $ (' # ' +file.id),
$error = $li. Find (' div.error ');

Avoid duplicate creation
if (! $error. Length) {
$error = $ (' <div class= ' error ' ></div> '). AppendTo ($li);
}

$error. Text (' Upload failed!!! ');
});

Finished uploading, success or failure, first delete the progress bar.
Uploader.on (' uploadcomplete ', function (file) {
$ (' # ' +file.id). Find ('. Progress '). Remove ();
});
}

);
</script>

Web upload uploading multiple picture instances