15 Days of jQuery(Day 11) --- 使用不苛刻的javascript代碼實現多文件上傳

 

好幾個月以前，當我在追逐互聯網上AJAX熱潮的時候，我在 FiftyFourEleven網站上發現了一篇使用創新的javascript代碼實現當時正在困擾我的「 單文件元素實現多文件上傳」的文章。

所以當我想寫作《15天漫遊jQuery》的時候，我第一個想到的就是用jQuery實現這個功能。

接觸易用性狂熱愛好者

幾天前當我檢查網站記錄的時候，發現了一條遺漏的文章trackback。跟過去看的時候我發現我的兩篇jQuery文章被作者引用來證明他為什麼討厭javascript。

根據這個人的說法，任何工具或技術如果沒有將易用性放在第一位都將成為垃圾。

儘管我很不同意這位仁兄一桿子打死的態度，但他還是讓我對這篇詳細教程有所留意。當我在編寫一個簡單網頁效果的時候，我會儘量小心謹慎的處理。這樣如果網站訪客們決定關閉javascript代碼執行功能的時候，他們仍然可以正常使用網站的功能。

關於第一價值的兩個教程

  • 使用一個文件輸入元素實現多文件上傳，並讓整個交互過程流暢舒適。
  • 讓多文件上傳更加人性化，但要避免以犧牲可用性為代價。關鍵在於使用不苛刻的javascript代碼製作多文件輸入區域。

演示

  • 只有一個文件輸入元素，但添加了jQuery和其他代碼實現較為親近用戶的多文件上傳功能。

演示一地址

  • 在頁面(x)html代碼中使用了多個文件輸入元素，但通過jQuery調整為與第一個演示類似的顯示頁面效果。優點是代碼是不苛刻的。。。即使關閉了javascript執行，用戶也能上傳多個文件。

演示二地址(這個演示有bug導致無法使用，作者修正了bug，使用這個後面鏈接查看演示演示二地址(no bug))

解釋

單文件輸入框

jQuery的$(document).ready() 函數的工作有兩個：

創建一個用來顯示最大允許上傳文件數的div元素。 查找文件上傳框（假設這裡只有一個），然後給它附上一個onChange事件。

$("input[@type=file]").change(function(){
doIt(this, fileMax);
});

doit()函數（簡單又好記，呵呵~）檢查是否達到了最大文件數量限制，如果不是，它會隱藏當前文件輸入框，在父div裡添加一個新的文件輸入框，將輸入框內的文件名使用id 「files_list」作為標記，在最後添加一個「刪除」按鈕。

在DOM樹中導航，我使用jQuery的parent()函數，然後用remove()函數移除元素。我還使用了append()和prepend()函數分別添加文件名和新的輸入框。

兩個關鍵點

- 最大文件上傳數量設定：

var fileMax = 3;

- 輸入框必須有適當的定位措施：

<input type="file" class="upload" name="fileX[]"/>

這樣弄以後輸入框可疑由訪問者決定添加還是刪除，沒有任何關於id或名稱的操作。當這個窗體代碼發送給服務器端腳本的時候，相關信息就已經被存放在了一個數組中了。

多文件輸入框

首先，文件允許上傳的數量由頁面中的文件輸入框的數量決定。其次，你仍然需要通過某種方法為每個輸入框接收到的內容用一個數組存放。

<input type="file" class="upload" name="fileX[]"/>

第二個演示跟前面的比起來最大的不同在於，我遍歷了每個文件輸入框並在其內容有改動時執行doit()函數。通過遍歷每一個輸入框，我可以為我的代碼添加有用的額外信息：輸入框內容在「堆棧」中的順序。

換句話說，當這段代碼執行時，它會特別指定第一個輸入框，或者第二個，抑或第三個。

代碼見下：

$("input[@type=file]:nthoftype("+
n+")")

jQuery的靈活性允許我們使用CSS和XPath描述語句定位指定的元素位置。

你會發現當一個文件被選中時，文件輸入框都會被文件名稱覆蓋。點擊文件名就可以選擇其他不同的文件。

 

15 Days of jQuery(Day 12) --- jQuery Lightbox （插件）

Cody Lindley 移植的第一版「 Thickbox」讓我第一次感受到了jQuery的魅力。後來他又做了一些 代碼升級以修復若干跨瀏覽器的兼容性問題。

一些需要注意的地方

$(document).ready 取代了TB_init() 函數，作用是在每個包含對象名「thickbox」的鏈接上附加一個onClick事件。

function TB_init(){
$("a.thickbox").click(function(){
var t = this.title || this.innerHTML || this.href;
TB_show(t,this.href);
this.blur();
return false;
});

當這些鏈接被點擊時，TB_show()函數就將執行。

$("body")
.append("<div id='TB_overlay'></div><div id='TB_window'></div>");
$("#TB_overlay").click(TB_remove);
$(window).resize(TB_position);
$(window).scroll(TB_position);
$("#TB_overlay").show();
$("body").append("<div id='TB_load'><div id='TB_loadContent'><img
src='images/circle_animation.gif' /></div></div>");

如你所見，在文檔body元素前添加了兩個div元素。換句話說，這兩個div元素將被添加在頁面html代碼的body關閉元素前。

覆蓋的div將使用一個特定的包含不透明外表的CSS文件指定表現。TB_window的代碼用來通過AHAH在頁面中放置一張圖片或者加入另一個頁 面。$(window).resize 和$(window).scroll 告訴jQuery在用戶重新調整窗口大小或者拖動頁面翻頁的時候執行TB_position函數。這是保證Thickbox始終保持在窗口中心部位的手 段。

接下來，Cody查詢url的後綴。

var urlString = /.jpg|.jpeg|.png|.gif|.html|.htm|.php|.cfm|.asp|.aspx|.jsp|.jst|.rb|.txt/g;
var urlType = url.match(urlString);
if(urlType == '.jpg' || urlType == '.jpeg' || urlType == '.png' || urlType == '.gif'){//code to show images

如果這是一個圖片文件，則jQuery的append函數會添加html代碼到適當位置。

$("#TB_window").append("<a href='' id='TB_ImageOff' title='Close'><img
id='TB_Image' src='"+url+"' width='"+imageWidth+"' height='"+imageHeight+"'
alt='"+caption+"'/></a>"
+ "<div id='TB_caption'>"+caption+"</div><div
id='TB_closeWindow'><a href='#' id='TB_closeWindowButton'>close</a></div>");
$("#TB_closeWindowButton").click(TB_remove);

另外，遠程文件將使用jQuery的load()函數導入。

$("#TB_ajaxContent").load(url, function(){

 

15 Days of jQuery(Day 13) --- jQuery 表格

一位叫Klaus的朋友編寫了一個小插件， 用jQuery實現可用性極佳的javascript表格。

設置好正確的(x)HTML 和CSS後，你可以像下面那樣創建表格：

$.tabs(」container」); first tab on by default 如果你像在默認位置「上方」再添加一個表格： $.tabs(」container」, 2); second tab on

Klaus這裡 示例，你可以看看最終效果。

我的改版

我稍微修改了Klaus的代碼，添加了一個簡單的表單用來生成表格的表頭。

用法：

非常簡單。只需要輸入每個表格的表頭（最多5個），然後點擊表單下方的按鈕。下一個頁面將生成結果HTML代碼，你可以複製然後粘貼到文件中。

你還需要 下載Klaus網站的CSS文件，做些你自己的修改，當然還要上傳jQuery框架庫到你的服務器上。

這裡是表格生成器的地址。

 

15 Days of jQuery(Day 14) --- Javascript 工具提示

Cody Lindley ，Thickbox的作者，日前發佈了 jTip - jQuery 工具提示。

我對其中很多想法和思路拍案叫絕。我知道你已經看過很多類似的工具提示代碼了。但是，Cody 的方法已經在我的工作中顯露出了閃光點。

當我檢查HTML代碼時，我發現了一個大問題，可訪問性。鏈接在javascript關閉的時候無法工作。我並不是傾向於一定要實現全面的可訪問性，只是在這裡我認為可以有其他更具親和力的方式實現相同的功能。

尤其是，我個人不喜歡那種為了可訪問性而去犧牲可用性來實現在提示框上鏈接另一個頁面鏈接的方法。我喜歡這個提示框 - 不是對Cody不尊重，只是在我這裡我「需要」它能夠在各種情況下工作。

今天我要提供給大家的是Cody的工具提示代碼的小小修改。如果你不是Cody工具提示的愛好者的話，我的改版對你來說也許不是很在意。但如果你喜歡他的作品同時希望它可以在javascript關閉的時候照常工作，這個也許是你需要的。

我的改動

讓我產生修改想法的，是他的代碼在Yahoo上的應用。我不喜歡他使用的代碼：

<a href="yahoo.htm?width=175&amp;link=http://www.yahoo.com"
name="Before You Click..."
id="yahooCopy"
class="jTip">Go To Yahoo</a>

所以我重寫了他的部分代碼，成了現在這個樣子：

<a href="http://www.yahoo.com"
rel="yahoo.htm?width=175&link=yahoo&name=Before%20
%20You%20Click..."
id="yahooCopy"
class="jTip">
Go To Yahoo</a>

我的示例

改進：HTML標準校驗

我的代碼可以通過w3.org的測試

改進：命名

在我修改Cody的代碼的時候我發現他使用了一個用來存儲鏈接名稱的叫做「title」的變量名，這會導致一些混淆。

我標出了這個命名問題，即使我認為這不過是個小小的失誤。

改進：可用性

使用我的代碼，你可以讓每個提示框都含有真實鏈接地址到另一個文檔，不管內部的還是外部的。或者你只是想要那個提示框，不想關心可用性，你同樣可以讓鏈接部分留空。

選擇權在你。

感謝

Cody提供了偉大的代碼，幫助我節省了大量的時間和精力。我的修改只是對原有代碼的輕微「調整」，希望朋友們喜歡。

arrow
arrow
    全站熱搜

    easonyo 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄