菠菜我最近在搞 Ext <clk><nobr target="_blank" onmouseout="kwL(event,this)" onclick="return kwC(event,7)" style="border-bottom: 1px dotted rgb(102, 0, 255); color: rgb(102, 0, 255); background-color: transparent; text-decoration: underline;" onmouseover="kwE(event,7, this);" id="clickeyekey7" onmousemove="kwM(7);" oncontextmenu="return false;">開發</nobr>的郵件系統</clk> , 其中就有用到如何上傳文件這個大眾化的問題 , 經過我一上午的研究和查資料終于搞定 , 現在決定把代碼共享出來 , 方便大家 , 呵呵 .
純屬個人原創
,
所以轉貼請注明出處
:
http://blog.csdn.net/zhangyunbo1116
當然
,
我使用的是
ExtJs
論壇中的一個組件
,
<clk>非常感嘆<nobr target="_blank" onmouseout="kwL(event,this)" onclick="return kwC(event,0)" style="border-bottom: 1px dotted rgb(102, 0, 255); color: rgb(102, 0, 255); background-color: transparent; text-decoration: underline;" onmouseover="kwE(event,0, this);" id="clickeyekey0" onmousemove="kwM(0);" oncontextmenu="return false;">作者</nobr>的牛比哄哄</clk>
.
作者的大名叫
: MaximGB ..
呵呵
,
現在我就為你到來如何開發這樣的上傳文件
.
基本結構是
:
Ext
前臺實現界面
,
后臺采用
Asp.Net
開發
. Jsp
我會
,
但就是
php
偶不會
,
可是在老外的論壇
,php
可是王者哦
,
呵呵
!
<clk>需要<nobr target="_blank" onmouseout="kwL(event,this)" onclick="return kwC(event,2)" style="border-bottom: 1px dotted rgb(102, 0, 255); color: rgb(102, 0, 255); background-color: transparent; text-decoration: underline;" onmouseover="kwE(event,2, this);" id="clickeyekey2" onmousemove="kwM(2);" oncontextmenu="return false;">下載</nobr>的</clk>
Ext
上傳文件的組件擴展
:
http://max-bazhenov.com/dev/upload-dialog-2.0/index.php
進入開發作者的頁面
,
下載最新的上傳組件包
,
如果不是最新的擴展包
,
有可能作者改過的
bug
你沒有修正
,
這樣
,
豈不是很慘哦
!
現在進入正題
,
我在這里只提供一個最最基本的
demo
<clk><nobr target="_blank" onmouseout="kwL(event,this)" onclick="return kwC(event,6)" style="border-bottom: 1px dotted rgb(102, 0, 255); color: rgb(102, 0, 255); background-color: transparent; text-decoration: underline;" onmouseover="kwE(event,6, this);" id="clickeyekey6" onmousemove="kwM(6);" oncontextmenu="return false;">程序</nobr></clk>
,
當然需要你知道的前提知識是
,
如何使用
Ext,
如何在自己的頁面中加入
js
文件
,
如果這個你都不會
,
我真的是很無語
,
你還是先開看
Ext
的基本教程吧
,
然后再看我這篇文章
.
下載后的壓縮包解壓
,
<clk>你就會發現<nobr target="_blank" onmouseout="kwL(event,this)" onclick="return kwC(event,10)" style="border-bottom: 1px dotted rgb(102, 0, 255); color: rgb(102, 0, 255); background-color: transparent; text-decoration: underline;" onmouseover="kwE(event,10, this);" id="clickeyekey10" onmousemove="kwM(10);" oncontextmenu="return false;">文件</nobr>不是很多</clk>
,
我只提兩個關鍵的文件
:
Ext.ux.UploadDialog.js
這個就是實現功能的
js
文件
,
但是是格式化的
,
方便感興趣的人自己閱讀的
js
代碼文件
,
當你發布應用的時候
,
建議不要引入該文件
,
而是引入下面一個文件
.
Ext.ux.UploadDialog.packed.js
是壓縮好的
,
引入這個文件
,
<clk>可以提高<nobr target="_blank" onmouseout="kwL(event,this)" onclick="return kwC(event,1)" style="border-bottom: 1px dotted rgb(102, 0, 255); color: rgb(102, 0, 255); background-color: transparent; text-decoration: underline;" onmouseover="kwE(event,1, this);" id="clickeyekey1" onmousemove="kwM(1);" oncontextmenu="return false;">用戶</nobr>的訪問速度</clk>
.
Ext.ux.UploadDialog.css
這是樣式文件
,
應該導入
.
如果你嫌麻煩
,
想直接看真實的東東
,
那就到這里下載
,
里面還有我漢化的一個小小的
js,
文件
,
只要覆蓋
: Ext.ux.UploadDialog.packed.js
就
可以了
.
http://download.csdn.net/user/zhangyunbo1116/
http://download.csdn.net/source/345961
先來
Ext
寫的界面
和對應的
js
代碼
,
該導入的你自己倒哦
<
html
xmlns
="http://www.w3.org/1999/xhtml"
>
<
head
>
<
title
>
<clk><nobr target="_blank" onmouseout="kwL(event,this)" onclick="return kwC(event,12)" style="border-bottom: 1px dotted rgb(102, 0, 255); color: rgb(102, 0, 255); background-color: transparent; text-decoration: underline;" onmouseover="kwE(event,12, this);" id="clickeyekey12" onmousemove="kwM(12);" oncontextmenu="return false;">測試</nobr>如何使用Ext2.0</clk>
</
title
>
<
meta
http-equiv
="Content-Type"
content
="text/html;charset=gb2312"
>
<!--
包含Ext2.0Css文件
-->
<
link
rel
="stylesheet"
href
="../Ext-2.0/resources/css/ext-all.css"
/>
<!--
包含Ext2.0腳本文件
-->
<
script
type
="text/javascript"
src
="../Ext-2.0/adapter/ext/ext-base.js"
></
script
>
<
script
type
="text/javascript"
src
="../Ext-2.0/ext-all.js"
></
script
>
<
script
type
="text/javascript"
src
="js/TestFormUpload.js"
></
script
>
<!--
上傳組件使用的鏈接
-->
<
link
rel
="stylesheet"
href
="Ext.ux.UploadDialog/UploadDialog/css/Ext.ux.UploadDialog.css"
/>
<
script
type
="text/javascript"
src
="Ext.ux.UploadDialog/UploadDialog/Ext.ux.UploadDialog.packed.js"
></
script
>
</
head
>
<
body
>
<
div
id
=''demo-panel''
>
<
h3
>
Demopanel
</
h3
>
<
div
id
=''file-list''
></
div
>
<
div
id
=''show-dialog-btn''
></
div
>
</
div
>
</
body
>
</
html
>



















































































關于漢化問題 , 開發的作者說的很詳細 , 我就很簡單 , 直接編輯了 Ext.ux.UploadDialog.packed.js . 在這個頁面的最后由一個對象 Ext.ux.UploadDialog.Dialog.prototype. i18n .. 直接把里面的英文改成中文就可以 , <clk>如果各位還信得過偶的英文<nobr target="_blank" onmouseout="kwL(event,this)" onclick="return kwC(event,5)" style="border-bottom: 1px dotted rgb(102, 0, 255); color: rgb(102, 0, 255); background-color: transparent; text-decoration: underline;" onmouseover="kwE(event,5, this);" id="clickeyekey5" onmousemove="kwM(5);" oncontextmenu="return false;">水平</nobr></clk> , 可以拷貝偶的翻譯的東東 , 下載覆蓋 .
可以到這里下載 :
var p=Ext.ux.UploadDialog.Dialog.prototype;p.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:" 不支持上傳該類型文件 .<br/> 請選擇下列類型的文件集合 {1}",note_queued_to_upload:" 上傳的隊列。 ",note_processing:" 上傳中 ...",note_upload_failed:" 當前請求過多,服務器正忙,不能及時響應或者因特網服務器發生錯誤。 ",note_upload_success:" 成功。 ",note_upload_error:" 上傳文件出錯。 ",note_aborted:" 已經被用戶中斷 "}
到現在 , 就完了 , 祝各位新年快樂 , 萬事大吉 , 鼠年發財 …..
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
