webuploader多图片上传php,PHP 多图上传，图片批量上传插件，webuploader.js，百度文件上传插件...
PHP? 多圖上傳，圖片批量上傳插件，webuploader.js，百度文件上傳插件(案例教程)
使用WebUploader還可以批量上傳文件、支持縮略圖等等眾多參數選項可設置，以及多個事件方法可調用，你可以隨心所欲的定制你要的上傳組件。
使用：
1、導入Css樣式文件：
2、定義html：
多圖上傳
0%
選擇圖片開始上傳1、準備一個按鈕#filePicker
2、準備一個用來存放添加的文件信息列表的容器.queueList
3、準備一個上傳按鈕.uploadBtn
2、javascript部分：
首先創建Web Uploader實例：
//實例化
uploader =WebUploader.create({/*************** 重要參數 *************/
//是否自動上傳(true是，false否)
auto: false,//flash文件地址
swf: './Uploader.swf',//上傳訪問的地址
server: './upload.php',//每次請求附帶的參數
formData: {act: 'ad_image'},//定義選擇文件的按鈕
pick: {id:'#filePick', label:'添加圖片'},/*************** 其他參數 ***************/
//指定托動區
dnd: '#dndArea',//禁掉全局的拖拽功能。這樣不會出現圖片拖進頁面的時候，把圖片打開。
disableGlobalDnd: false,//指定監聽paste事件的容器，如果不指定，不啟用此功能。此功能為通過粘貼來添加截屏的圖片
paste: '#uploader',//指定可以上傳那些類型的圖片
accept: {
title:'Images',
extensions:'jpg,jpeg,png',
mimeTypes:'image/jpg,image/jpeg,image/png'},
thumb:{
width:110,
height:110,//圖片質量，只有type為`image/jpeg`的時候才有效。
quality: 70,//是否允許放大，如果想要生成小圖的時候不失真，此選項應該設置為false.
allowMagnify: false,//是否允許裁剪。
crop: true,//為空的話則保留原有圖片格式。
//否則強制轉換成指定的類型。
type: 'image/jpeg'},
compress:{
width:1600,
height:1600,//圖片質量，只有type為`image/jpeg`的時候才有效。
quality: 90,//是否允許放大，如果想要生成小圖的時候不失真，此選項應該設置為false.
allowMagnify: false,//是否允許裁剪。
crop: false,//是否保留頭部meta信息。
preserveHeaders: true,//如果發現壓縮后文件大小比原來還大，則使用原來圖片
//此屬性可能會影響圖片自動糾正功能
noCompressIfLarger: false,//單位字節，如果圖片大小小于此值，不會采用壓縮。
compressSize: 0,//強制轉換成指定的類型。
type: 'image/jpeg'},//允許在文件傳輸時提前把下一個文件準備好 【默認值：false】
prepareNextFile:true,//是否要分片處理大文件上傳【默認值：false】
//chunked: false,
//分多大一片【默認值：5242880】
//chunkSize: 512 * 1024,
//如果某個分片由于網絡問題出錯，允許自動重傳多少次!【默認值：2】
//chunkRetry:10,
//上傳并發數。允許同時最大上傳進程數【默認值：3】
//threads:3,
//文件上傳方式，POST或者GET【默認值：'POST'】
//method:'POST',
//最大上傳數量，(驗證文件總數量, 超出則不允許加入隊列)。
fileNumLimit: 20,//驗證文件總大小是否超出限制, 超出則不允許加入隊列
fileSizeLimit: 200 * 1024 * 1024,//驗證單個文件大小是否超出限制, 超出則不允許加入隊列
fileSingleSizeLimit: 50 * 1024 * 1024});
接著監聽fileQueued事件，即當有文件添加進來的時候，通過uploader.makeThumb來創建圖片預覽圖
至于事件中用到的方法就不寫出來的，需要研究的可以下載源碼查看學習！(uploader.makeThumb也是寫在方法里面去了)
//當文件被加入隊列以后觸發。
uploader.onFileQueued = function(file) {
fileCount++;
fileSize+=file.size;if (fileCount === 1) {
$placeHolder.addClass('element-invisible');
$statusBar.show();
}
addFile(file);
setState('ready');
updateTotalProgress();
};//上傳過程中....
uploader.onUploadProgress = function(file, percentage) {var $li = $('#' +file.id),
$percent= $li.find('.progress span');
$percent.css('width', percentage * 100 + '%');
percentages[ file.id ][1 ] =percentage;
updateTotalProgress();
};//當文件被移除隊列后觸發。
uploader.onFileDequeued = function(file) {
fileCount--;
fileSize-=file.size;if (!fileCount) {
setState('pedding');
}
removeFile(file);
updateTotalProgress();
};
最后是上傳狀態提示了，
當文件上傳過程中, 上傳成功，上傳失敗，上傳完成都分別對應
uploadProgress, uploadSuccess, uploadError, uploadComplete事件。
//文件上傳成功
uploader.on( 'uploadSuccess', function( file,data ) {var $li = $('#' +file.id),
$percent= $li.find('.success');
$dsf= $('').appendTo($li),
setState('confirm');
});//文件上傳過程中創建進度條實時顯示。
uploader.on( 'uploadProgress', function( file, percentage ) {
setState('uploading');
});//文件上傳失敗，顯示上傳出錯
uploader.on( 'uploadError', function( file ) {
setState('finish');
});
uploader.on("uploadAccept", function( file, data){if ( data.success==true) {//通過return false來告訴組件，此文件上傳有錯。
return true;
}else{return false;
}
});
至于事件中用到的方法就不寫出來的，需要研究的可以下載源碼查看學習！
2、PHP部分：
date_default_timezone_set("Asia/Shanghai");//1、圖片文件上傳處理 (上傳邏輯就自己寫了。)
//2、返回值//假如這是上傳成功后得到的文件名
$file = date("Ymd_").rand(1000,9999).'.jpg';
$res=array('success' => true,'file' =>$file
);
die(json_encode($res));?>
PHP? 多圖上傳，圖片批量上傳插件，webuploader.js，百度文件上傳插件(案例教程)
WebUploader作用：
使用WebUploader還可以批量上傳文件、支持縮略圖等等眾多參數選項可設置，以及多個事件方法可調用，你可以隨心所欲的定制你要的上傳組件。
使用：
1、導入Css樣式文件：
2、定義html：
1、準備一個按鈕#filePicker
2、準備一個用來存放添加的文件信息列表的容器.queueList
3、準備一個上傳按鈕.uploadBtn
2、javascript部分：
首先創建Web Uploader實例：
總結
以上是生活随笔為你收集整理的webuploader多图片上传php,PHP 多图上传，图片批量上传插件，webuploader.js，百度文件上传插件...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Qt 识别 DM 码
- 下一篇： 动态规划算法php,php算法学习之动态