Multi-File Upload plug-ins are commonly used:
1, jquery uploadify download "http://www.uploadify.com/download/"
2, jquery file upload download "Https://github.com/blueimp/jQuery-File-Upload/tags"
3, Webuploader download "http://fex.baidu.com/webuploader/download.html"
Note:
In the use of the time, to refer to the official website of the documentation, if you do not understand, you can Baidu want to know, will I here is just a small example of getting started
First, jquery uploadify
The plugin has been written to the file (index.php and uploadify.php), download and then change the upload path on the line, there is nothing to talk about
Two, jquery file upload take thinkphp as example the index controller under the home module
Layout file index.html:
<!doctype html>
The Uploadimg method under the index controller
/* File upload processing/public
function uploadimg () {
$upload = new \think\upload ()//materialized upload class
$upload->maxsize = 3145728//Set attachment upload size
//$upload->exts = Array (' jpg ', ' gif ', ' PNG ', ' jpeg ');//Set attachment upload type
$ Upload->rootpath = ' ./public/uploads/';//Set up attachment upload root directory
$upload->savepath = '; Set attachment upload (sub) directory
$upload->autosub = false; Close subdirectory
//upload file
$info = $upload->upload ();
if (! $info) {//Upload error message error messages
$this->error ($upload->geterror ());
} else{//Upload successfully uploaded file information
$pathArr = Array ();
foreach ($info as $file) {
Array_push ($PATHARR, "public/uploads/". $file [' Savepath ']. $file [' savename ']);
echo Json_encode ($PATHARR);
}
}
Third, Webuploader (also take thinkphp as an example) can be more than file pictures large file Upload
HTML Layout:
<! DOCTYPE html>
JS script:
<script>//Photo Upload demo jquery (function () {var $ = jquery, $list = $ (' #fileList '),// Optimized retina, under Retina This value is 2 ratio = Window.devicepixelratio | | 1,//thumbnail size Thumbnailwidth = ratio, Thumbnailheight = * ratio,//Web Uploader
Example uploader;
Initialize Web Uploader Uploader = webuploader.create ({//automatically uploaded.
Auto:true,//swf file path swf: ' __public__/webuploader/uploader.swf ',//File receive server. Server: ' __controller__/webuploader ',//Select File button.
Optional.
The interior is created according to the current run, possibly an INPUT element, or it may be flash.
Pick: ' #filePicker ',//Only allow selection of files, optional. Accept: {title: ' Images ', Extensions: ' Gif,jpg,jpeg,bmp,png ', mimetypes:
' image/* '}}); When a file is added 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 thumbnail uploader.makethumb (file, function (Error, SRC) {if (error) {
$img. ReplaceWith (' <span> cannot preview </span> ');
Return
$img. attr (' src ', src);
}, Thumbnailwidth, thumbnailheight);
});
The file upload process creates a progress bar to display in real time. Uploader.on (' uploadprogress ', function (file, percentage) {var $li = $ (' # ' +file.id), $per
cent = $li. Find ('. Progress span '); Avoid duplicating the IF (! $percent. length) {$percent = $(' <p class= ' progress ' ><span></span></p> '). Appendto ($li)
. Find (' span ');
$percent. css (' width ', percentage * + '% '). Text (percentage * 100+ '% ');
}); File upload Success, add success class to item, with