看完麻蛙的上傳教學後,大家應該都有感覺到上傳類型與申請類型的GDL其實只差在流程而已~

所以打鐵趁熱,再繼續來看看這個需要嚴謹規劃流程的 GigaSize 空間~


照例,先用NT的瀏覧器連去 http://www.gigasize.com/  ,然後再切至 DEBUG 分析,接著就自動生成指令~

上圖的內容應該不用我再解釋了吧~ (看不懂的人請回第一篇重修)

GetFile()
IFNo:end
Label:begin
go:www.gigasize.com
FindWebText:Files (maximum
IfNo:begin
SetFileValue:i_file=***File***
ClickCheckBox:accept,1
ClickImage:btn-upldreg.gif

說實在話,以第一印象來看,寫這空間實在完全沒難度…

那接著我們再來看一下上傳成功的字眼好作偵錯用!!

這…  按下上傳鈕後,竟要連過三關才看的到最後的檔案連結… (若這好賺呷的話,我也不會拿來當教學用例子了~ XD )

 

第一個圖:指上傳進度表,內容為上傳檔案的SIZE 與 目前上傳的進度

第二個圖:指的就是上傳已完成,接著等待檔案上架

第三個圖:指檔案上傳完成且成功上架後,由SERVER回傳來的最後資訊~

所以我們按下上傳鈕後,就必需要考量到三段式的回傳程序!!

不知大家還記不記得我在教學第一篇提過的內容:

不同作業系統對網頁元件觸動的認定方式有所不同!!

而當我們按下上傳鈕跳到第一個圖中的畫面後,那個進度表會持續即時改變目前已上傳完成的進度!!

這個更新進度的動作,極有可能會觸動該網頁上的某些元件,而造成NT誤判上傳是已經完成, 導致程序在未完成上傳前就往下走!!

所以這裏的偵錯處理要粉小心~

GetFile()
IFNo:end
Label:begin
go:www.gigasize.com
FindWebText:Files (maximum
IfNo:begin
SetFileValue:i_file=***File***
ClickCheckBox:accept,1
ClickImage:btn-upldreg.gif
FindWebText:Upload speed
IfNo:begin
stop()
stop()
stop()
Label:wait_
WaitWebText:Direct Link,3,wait_
WaitWebText:Direct Link,4,wait_

 大家可看到我上面的寫法!! 我在確定頁面轉進上傳中(文字偵錯)後,連下了三個STOP() ,其中的意義如下~!

因為第一個圖的畫面剛出現時,進度條是還沒有內容的,所以此時程序會定在第一個STOP() 上~

接著,SERVER會開始陸續的傳回我們已上傳的進度,此時頁面會有所改變!!

這裏NT極有可能會誤判第一個STOP() 已完成而將程序往下移,即再度定在第二個STOP()上~

到此,以我WIN2K 系統來說,一直到進度達100% 為止,不管它回傳幾次資料,NT 都不會再判斷第二個STOP() 已完成,所以第一個圖只會用到兩個STOP() !!

接下來,當上傳進度達100%後,就會換頁跳到第二個畫面去~ ( 此時在處理檔案上架的動作 )

當然,有換頁程序就會往下走,接著就再定在第三個STOP() 上~!

而這第二個圖的頁面是粉單純的,不會有偷跑的情形,一直到跳到第三個頁面前,都會定在這第三個STOP()上!!!

接著,轉換到最後一個圖時,因為它的頁面有框架存在,所以我又再連續加了兩個 WaitWebText:   的偵錯~

目的是怕程序在框架頁戴入完成後,會誤判為整個頁面都已載入完成!!

 

不知大家看了感覺如何??  我個人是覺得對以上的流程實在沒有百分百的把握~ 

尤其是XP的使用者,在用到第二個STOP() 後,陸續回傳的進度條,是否會再造成NT 的誤判,實在是粉難去拿捏!!

假設每傳回一次進度都得加一個偵錯的設計,這樣下去會沒完沒了!!!  我們應該要想法子繞過去才對!!!


好,那再請大家回頭去翻一下第一篇教過的東西!!    你會發現我以上的寫法是屬於改良二的方式~

現在,我就換用改良一的方式來試試看!! 即是改用表單送出的方式來閃過按下上傳鈕後會觸動執行上傳進度條的難題!!

那,我必需要先知道俱上傳欄位的那個表單名或它是處於網頁中的第幾個表單!!

那如何快速找到我們要的表單資訊呢??  在基礎教學2 已介紹過了!!  (看不懂的人,快回頭重修吧… )

打開網頁源碼後,搜一下  multipart/form-data  這個關鍵字 所在的表單就對啦!!!

<form enctype="multipart/form-data" action="http://www.gigasize.com/cgi-bin/upload-multi.cgi?sid=d78cf45892a4e79935e3ab20dfd33f7f&amp;description=" method="post" target="iframe_upload" onsubmit="return upload_submit_form();" id="upload_form">

所以我們會搜到上面這段源碼!! 呀這個表單雖然沒 name 屬性,但是有id 的屬性,所以我們可以用 PostForm:upload_form       【03-網頁控制類】

當然我們也可以用此表單在所有表單中的排序!!

首先切換到DEBUG ,控制項選 FORM !!  此時,你會發現共有四個表單~ 

而其中第二個的 Action 剛好就與我們查到的源碼一樣~  所以我們就知道它的順序就是第二 !!

所以可用 PostForm:[1]  來送出。  (因為此指令的參數是從0算起,所以第二個就是1。若是第一個就是0,依此類推)                 【03-網頁控制類】

好,那我們就先改用下面這樣子來跑看看~

GetFile()
IFNo:end
Label:begin
go:www.gigasize.com
FindWebText:Files (maximum
IfNo:begin
SetFileValue:i_file=***File***
ClickCheckBox:accept,1
PostForm:[1]

傳完後的結果,頁面動也不動…   但你若有流量監控的軟體,可查一下剛才的表單送出,的確是有將檔案上傳的~

所以我們合理的思考,此空間的上傳,是否在提交表單外,還需要另外的動作呢?? 

 

好!!  那我們就先回過頭去看看按下上傳鈕的,出現的三個畫面~ 

照理來推斷,當我們將表單內容送出完成後,即上傳完成。那該是在第一個圖中達成100% 的時候~

此時,第一個圖轉換至第二個圖的畫面,就該是關鍵了!!

所以我們可以試著讓畫面停在要換頁的動作上,再來找看看有沒任何蛛絲馬跡~

GetFile()
IFNo:end
Label:begin
go:www.gigasize.com
FindWebText:Files (maximum
IfNo:begin
SetFileValue:i_file=***File***
ClickCheckBox:accept,1
ClickImage:btn-upldreg.gif
FindWebText:Upload speed
IfNo:begin
stop()
stop()
SetAutoOutput:http                          【03-網頁控制類】
stop()
Label:wait_
WaitWebText:Direct Link,7,wait_
WaitWebText:Direct Link,7,wait_
over()

這裏,我運用了 SetAutoOutput:  這個指令,使得當第一個畫面中的進度達到100%,若要切換至第二張圖的頁面時,讓它定住不動 !!!

不過我發現竟沒取到任何東西~ 反倒是在第二張圖要切換到最後成功畫面的這個步驟有取到(即檔案上架)!!

如上圖所示,我在輸出清單中,發現了這樣的一段連結~

http://www.gigasize.com/index.php?f=949351--&pass=d7f92259d74501cee39dc3c21d57311e--

由此可見,f  、pass 這兩個參數,應該也是我們需要的其中之一關鍵!!!

 

好! 我們重新再回憶一下在基礎教學2裏學過的東西!!

正常來說,要提交一個俱上傳欄位的表單,那這個表單至少需定義出三個屬性~

method="post" 、enctype="multipart/form-data"   與  action="URL"  

那我們剛查到的源碼裏,除了這三個外,還有一個   onsubmit="return upload_submit_form();  的JS 語法!!  是了,就是它!!

(在JS 裏, onsubmit 與 onclick 並不一樣!!  後者是經由click()的動作來觸發,而前者則是有submit() 的動作時才會觸動~)

所以,我們應該就是少了這個動作,才會導致有上傳卻無回傳的頁面~

好,那我們就再從源始碼裏來找看看有沒 upload_submit_form() 的這段JS 語法~ ( 果然… 又找不到了… )

那只好改找JS檔了~

最後你會在lib.js 裏,找到 upload_submit_form() 的內容~ (  該頁面的JS 檔有一大堆,除了靠其命名的方式來判斷外,只能憑經驗與… 運氣 )

好,翻開lib.js 內容後,相信你除了想死外,應該沒別的想法了~

裏面大量的語法真是讓人頭昏眼花,就連筆者本人,也是花了十來分才能找出讓SERVER 回傳資料的方法~ 

所以你看不懂是正常的!! 沒關系,我會教你如何硬著頭皮上的… XD

 

首先,我們就利用剛才取到的兩個參數(f 與pass )下去搜尋~

你會發現,這兩個參數是寫在  function __store_endUpload(fileid, pass)  裏~

function __store_endUpload(fileid, pass) {
if (__store_updater) {
__store_updater.stop();
}
Element.hide($('progresscontainer'));
Element.show($('uploadcompleted'));
document.location = 'index.php?f=' + fileid + '&pass=' + pass;
}

但這段是表示第二張圖轉換至最後檔案上架的流程,與我們要的第一張圖達到100%後,轉至第二張圖的方法是無關的~

所以我們得找看看哪裏會用到它~    再改搜 function __store_endUpload  後,你會看到它是在  function __store_updateProgress(pb ,ps, fn ,pt, req)  裏出現~

這段就粉長了我就不列出來了,它主要就是在進行即時的回傳進度條資訊~ 嗯,快要接近我們要的東西了~

好,照樣再來搜 __store_updateProgress  ~

你會發現它出現在下面這段中~

new Ajax.PeriodicalUpdater({},'upload_progress.php',{'decay': 1,'frequency' : 2,'method': 'post','parameters': 'sid=' + sid,'onSuccess' : function(request){__store_updateProgress($('progresscounter'), $('progressspeed'), $('progressfile'), $('progresstime'), request)},'onFailure':function(request){__store_updateFailure($('progresscounter'),request)}})

這裏就是關鍵了!!

原來SERVER 是用 upload_progress.php 取得我們上傳的進度,再把資料用function __store_updateProgress(pb ,ps, fn ,pt, req)  丟回進度條上~

等上傳達100% 後,再改由 function __store_endUpload   來進行檔案上架的動作 ~

其中, sid  代表的就是SERVER用來與網頁取得聯繫的參數 ! 也就是我們上傳表單裏的Action 值!!

如此一來,所有的疑惑就全都通了!!

 

我們要作的就是當表單送出完成後,需要借由upload_progress.php 加上sid 值,來告訴 SERVER 一個已完成100%的訊號~

此時它應該就會傳回給我們 f 與 pass 的值,我們再藉由這兩個值進行檔案上架的動作,最後應該就可以得到我們要的分享連結了~

 

GetFile()
IFNo:end
Label:begin
go:www.gigasize.com
FindWebText:Files (maximum
IfNo:begin
//---取得SID 值
WebStrToVariable:upload-multi.cgi?sid=,&,***Variable75***
SetFileValue:i_file=***File***
ClickCheckBox:accept,1
PostForm:upload_form
//PostForm:[1]
sleep()
//---傳送給SERVER 一個上傳完成的訊息
go:http://www.gigasize.com/upload_progress.php?sid=***Variable75***

果不其然… 如下圖,f 與 pass 的值終於出現了~ 

要取這兩個值粉easy吧!!

WebStrToVariable:perl done ,-- ,***Variable2***
WebStrToVariable:-- ,--,***Variable3***

最後就是套上其值來讓檔案上架~

go:http://www.gigasize.com/index.php?f=***Variable2***--&pass=***Variable3***--

 

我再把GDL 整理一下:

GetFile()
IFNo:end
Label:begin
go:www.gigasize.com
FindWebText:Files (maximum
IfNo:begin
//---取得SID值
WebStrToVariable:upload-multi.cgi?sid=,&,***Variable75***
SetFileValue:i_file=***File***
ClickCheckBox:accept,1
PostForm:upload_form
//PostForm:[1]
sleep()
//---傳送給SERVER 一個上傳完成的訊息
Label:ok
go:http://www.gigasize.com/upload_progress.php?sid=***Variable75***
FindWebText:perl done
IfNo:ok
//---取得f、pass 之值
WebStrToVariable:perl done ,-- ,***Variable2***
WebStrToVariable:-- ,--,***Variable3***
//---檔案上架
Label:wait_
go:http://www.gigasize.com/index.php?f=***Variable2***--&pass=***Variable3***--
WaitWebText:Direct Link,3,wait_
WaitWebText:Direct Link,4,wait_

 

接著就是取連結了~

如上圖所示,連結剛好是第八個INPUT 的值~ 所以直接用 ItemToVariable:[8],***Variable4*** 就可以取到了~  【03-網頁控制類 】

那最後再補上一個【檔案清單】內是否還有檔案的判斷與收尾的程序全終止,此GDL就算全部搞定囉~

Label:up
GetFile()
IFNo:end
Label:begin
go:www.gigasize.com
FindWebText:Files (maximum
IfNo:begin
//---取得SID值
WebStrToVariable:upload-multi.cgi?sid=,&,***Variable75***
SetFileValue:i_file=***File***
ClickCheckBox:accept,1
PostForm:upload_form
//PostForm:[1]
sleep()
//---傳送給SERVER 一個上傳完成的訊息
Label:ok
go:http://www.gigasize.com/upload_progress.php?sid=***Variable75***
FindWebText:perl done
IfNo:ok
//---取得f、pass 之值
WebStrToVariable:perl done ,-- ,***Variable2***
WebStrToVariable:-- ,--,***Variable3***
//---檔案上架
Label:wait_
go:http://www.gigasize.com/index.php?f=***Variable2***--&pass=***Variable3***--
WaitWebText:Direct Link,3,wait_
WaitWebText:Direct Link,4,wait_
//---取得分享連結
ItemToVariable:[8],***Variable4***
output:***Variable4***
FileLoop:up
Label:end
EXIT()

 


後記:

我會挑這麼機車的空間來寫教學,除了其適合演練各種程序上的思考模式外,也算是在為將來的Ajax 上傳做暖身~

因為多段式的回傳是將來寫Ajax 會碰到最大的困擾!! 希望大家若有不懂的地方可以多看幾遍,絕對會對你以後寫Ajax_GDL有相當大的幫助喔~

Free Web Hosting