利用Ext.ux.UploadDialog實現異步多 文件上傳
1、先看看效果：
接下來詳細說說怎么用它：java實現
2、需要的組件：Ext.ux.UploadDialog.js
官網下載地址： http://www.max-bazhenov.com/dev/upload-dialog-2.0/index.php
下載解壓后把整個的拷到web工程下面，例如我放在：WebRoot/comm/extjs/UploadDialog下面
3、接下來在你的jsp里面引入需要的文件：
<link rel="stylesheet" type="text/css" href="comm/extjs/UploadDialog/css/Ext.ux.UploadDialog.css" />
<script type="text/javascript" src="comm/extjs/UploadDialog/Ext.ux.UploadDialog.js"></script>
<script type="text/javascript" src="comm/extjs/UploadDialog/locale/ru.utf-8_zh.js"></script>
?
其中上面引入的第三個js文件是我改過了的，用來做漢化的，包里面自己帶的文件叫?? ru.utf-8.js ；
這里也把這個文件貼上上來把，可以直接copy它：
//ru.utf-8_zh.js
Ext.apply(
Ext.ux.UploadDialog.Dialog.prototype.i18n,
{
??? title: '上傳頭像',
??? state_col_title: '狀態',
??? state_col_width: 70,
??? filename_col_title: '文件名',
??? filename_col_width: 230,
??? note_col_title: '備注',
??? note_col_width: 150,
??? add_btn_text: '添加',
??? add_btn_tip: '添加文件到上傳列表',
??? remove_btn_text: '刪除',
??? remove_btn_tip: '從上傳列表中上傳文件',
??? reset_btn_text: '重置',
??? reset_btn_tip: '重置
文件上傳
列表',
??? upload_btn_start_text: '開始上傳',
??? upload_btn_stop_text: '停止上傳',
??? upload_btn_start_tip: '開始上傳',
??? upload_btn_stop_tip: '停止上傳',
??? close_btn_text: '關閉',
??? close_btn_tip: '關閉上傳窗口',
??? progress_waiting_text: '等待……',
??? progress_uploading_text: '正在上傳: {0} / {1} 上傳成功',
??? error_msgbox_title: '錯誤信息',
??? permitted_extensions_join_str: ',',
??? err_file_type_not_permitted: '錯誤的文件類型: {1}',
??? note_queued_to_upload: '等待上傳',
??? note_processing: '上傳中……',
??? note_upload_failed: '上傳失敗',
??? note_upload_success: '上傳成功',
??? note_upload_error: '上傳出錯',
??? note_aborted: '忽略',
??? note_canceled: '取消'
}
);
?
4、jsp里面調用
jsp:
<html>
<head>
</head>
<body>
<img id="upload_image_btn" src="/bbs/images/upload_image.png" style="cursor: pointer;">
</body>
</html>
js:
//創建上傳組件
?? $('#upload_image_btn').click(function()
??? {
?????? dialog = new Ext.ux.UploadDialog.Dialog({
???????????? title: '上傳頭像' ,
????????????
url:'system/upload-uploadImage.action'
, //這里我用struts2做后臺處理
???????????? post_var_name:'uploadFiles',//這里是自己定義的，默認的名字叫file
???????????? width : 450,
???????????? height : 300,
???????????? minWidth : 450,
???????????? minHeight : 300,
???????????? draggable : true ,
???????????? resizable : true ,
????????????? //autoCreate: true,???
???????????? constraintoviewport: true ,
???????????? permitted_extensions:[ 'JPG' , 'jpg' , 'jpeg' , 'JPEG' , 'GIF' , 'gif' , 'png' , 'PNG' ],???
???????????? modal: true ,
????????????? reset_on_hide: false ,
???????????? allow_close_on_upload: false ,??? //關閉上傳窗口是否仍然上傳文件
//??????????? upload_autostart: true???? //是否自動上傳文件
???????????? upload_autostart: false
?????? });
???????????
?????? dialog.show(); //'show-button'
?????? dialog.on( 'uploadsuccess' , onUploadSuccess); //定義上傳成功回調函數
?????? dialog.on( 'uploadfailed' , onUploadFailed); //定義上傳失敗回調函數
?????? dialog.on( 'uploaderror' , onUploadFailed); //定義上傳出錯回調函數
?????? dialog.on( 'uploadcomplete' , onUploadComplete); //定義上傳完成回調函數
??? });
???
??? //
文件上傳
成功后的回調函數
??? onUploadSuccess = function(dialog, filename, resp_data, record){
??????? alert(resp_data.data);//resp_data是json格式的數據
??? }
???
??? //
文件上傳
失敗后的回調函數
??? onUploadFailed = function(dialog, filename, resp_data, record){
??????? alert(resp_data.data);
??? }
???
??? //
文件上傳
完成后的回調函數
??? onUploadComplete = function(dialog){
?????? alert('所有
文件上傳
完成');
//??? dialog.hide();
???? }
說明：
這里多 文件上傳 其實不是一次性把多個文件傳到后臺，其實也是一次一個文件，只不過它把這個過程連續起來進行了而已，所以上面的那個// 文件上傳 成功后的回調函數//執行的次數是跟上傳的文件數目相同的；而// 文件上傳 完成后的回調函數//是當列表中所有的都完成后執行一次
5、java后臺部分
后臺得到文件的時候，要根據前面定義的 post_var_name來取文件，NND，這個百度空間發文章太累了，
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
