插件官網文檔:http://www.uploadify.com/documentation/ 首先引用外部資源,jquery.min.js,jquery.uploadifive.min.js或jquery.uploadifive.js和uploadifive.css$('#file_upload') ...
插件官網文檔:http://www.uploadify.com/documentation/
uploadify分為Flash版和HTML5版,其中Flash版是免費的,H5版是收費的,這裡介紹的是收費的H5版
首先引用外部資源,jquery.min.js,jquery.uploadifive.min.js或jquery.uploadifive.js和uploadifive.css
$('#file_upload').uploadifive({
'auto':false,//設置auto為true,當文件被添加至上傳隊列時,將會自動上傳
'buttonClass':'btn',//為上傳按鈕添加類名
'buttonText':'選擇圖片',//定義顯示在預設按鈕上的文本
'dnd':true,//如果設置為 false , 拖放功能將不被啟用
'fileObjName':'11',//定義上傳數據處理文件中接收數據使用的文件對象名
'fileSizeLimit':1000,//上傳文件大小限制,單位KB
'fileType':'image',//允許上傳的文件類型
//'checkScript': 'check-exists.php',//定義檢查目標文件夾中是否存在同名文件的腳本文件路徑
//'formData': {
// 'timestamp': '',
// 'token': ''
//},//定義在文件上傳時需要一同提交的其他數據對象
'height':20,//上傳按鈕的高度(單位:像素)
'width':100,//上傳按鈕的寬度(單位:像素)
// 'itemTemplate' : '',//指定上傳隊列的HTML
'method':'post',//上傳文件的提交方法,取值‘post‘或‘get‘。
'multi':true,//設置值為false時,一次只能選中一個文件
//'overrideEvents':['onProgress'],//該項定義了一組預設腳本中你不想執行的事件名稱
'queueSizeLimit':12,//上傳隊列中一次可容納的最大條數
'removeCompleted':true,//不設置該選項或者將其設置為false,將使上傳隊列中的項目始終顯示於隊列中,直到點擊了關閉按鈕或者隊列被清空
// 'simUploadLimit': 10,//所述多個文件同時上傳 , 可以在任何給定時間
'truncateLength':1,//截斷文件名字元
'uploadLimit':2,//定義允許的最大上傳數量
'queueID':'queue',//queueID選項允許你設置一個擁有唯一ID的DOM元素來作為顯示上傳隊列的容器
'uploadScript':'up.ashx',//伺服器處理腳本的路徑
'onUploadComplete':function(file, data) {
//
},//每一個文件上傳完成都會觸發該事件,不管是上傳成功還是上傳失敗
//'onAddQueueItem':function(file) {
// // alert('The file ' + file.type + ' was added to the queue!');
//},//將一個新文件添加到上傳隊列時觸發
//'onCancel': function () {
// alert('The file ' + file.name + ' was cancelled!');
//},//設置onCancel選項,在文件上傳被取消時,將允許運行一個自定義函數
//'onCheck': function (file, exists) {
// if (exists) {
// alert('The file ' + file.name + ' exists on the server.');
// }
//},//當檢測該文件已存在時執行
//'onClearQueue': function (queue) {
// queue.css('border', '2px solid #F00');
//},//設置onClearQueue選項,上傳隊列清空(激活ancel方法)時,將允許運行一個自定義函數
//'onDestroy': function () {
// alert('Oh noes! you destroyed UploadiFive!');
//},//銷毀Uploadify實例(調用destroy方法)時觸發該事件
//'onDrop': function (file, fileDropCount) {
// alert(fileDropCount + ' files were dropped onto the queue.');
//},//當文件被放到該隊列文件
//'onError': function (errorType) {
// alert('The error was: ' + errorType);
//},//選擇文件發生錯誤時執行
//'onFallback': function () {
// alert('Oops! You have to use the non-HTML5 file uploader.');
//},//瀏覽器檢測不到相容時觸發該事件
//'onInit': function () {
// alert('Add files to the queue to start uploading.');
//},//調用Uploadify初始化結束時觸發該事件
//'onProgress': function (file, e) {
// if (e.lengthComputable) {
// var percent = Math.round((e.loaded / e.total) * 100);
// }
// file.queueItem.find('.fileinfo').html(' - ' + percent + '%');
// file.queueItem.find('.progress-bar').css('width', percent + '%');
//},//上傳進度更新時觸發該事件
//'onQueueComplete': function (uploads) {
// alert(uploads.successful + ' files were uploaded successfully.');
//},//隊列中的所有文件被處理完成時觸發該事件
//'onSelect': function (queue) {
// alert(queue.queued + ' files were added to the queue.');
//},//每添加一個文件至上傳隊列時觸發該事件
//'onUpload': function (filesToUpload) {
// alert(filesToUpload + ' faddfd.');
//},//上傳操作時觸發
//'onUploadComplete': function (file, data) {
// alert('The file ' + file.name + ' uploaded successfully.');
//},//每一個文件上傳完成都會觸發該事件,不管是上傳成功還是上傳失敗
'onUploadFile':function(file) {
alert('The file '+file.name+' is being uploaded.');
},//開始上傳時觸發
});