2012-10-15 31 views
1

我試圖創建一個Web API,允許一個人(當然,最好的程序)提交一個大的二進制文件,並收到一個ID爲回報文件。我有一些HTML與形式(method="POST"),並且可以提交一個文件到一些PHP代碼,使用標準的multipart/form-data的MIME類型的<input type="file" ...>元件。 PHP生成該ID並將其打印出來作爲其結果。因爲PHP只是打印ID,而不是重定向到另一個HTML頁面或生成HTML本身,所以它不是很漂亮,但希望對於編程文件提交API的預期用例來說足夠了。我應該如何編寫一個接收文件的Web API?

到目前爲止,這麼好。當我想讓客戶端代碼捕獲返回的ID並使用其調用其他API時,會變得棘手。如果客戶端是使用JavaScript的網頁,好像客戶端應該使用XMLHttpRequest,但我不清楚如何獲取該對象使用的文件與文件輸入控件中選擇的用戶。

我很喜歡用手動操作的網頁表單(用於簡單的用戶界面和測試)和純粹的程序化調用(如使用JavaScript,curl/libcurl等)來使用相同的API。我不希望PHP使用查詢字符串中的ID向另一個頁面發出重定向,並且我不想直接返回HTML。我只想要一個簡單的文件,ID out API。

由於這是證明很難,我懷疑我處理事情的方式不對。我願意接受其他設計,但我寧願儘可能保持簡單。我發現有一個similar question,但它也是以Java爲中心的,並不能解決我的問題。

+0

是您的問題:「我如何使用JavaScript來上傳用戶選擇文件並捕獲返回的文檔?」?這似乎是你遇到的唯一問題,但你的擔心似乎與服務器端的設計有關。 – Quentin

+0

或多或少。該文件可以是用戶選擇的(比如在表單中),也可以通過編程方式提供(如從腳本中提供)。返回的文檔實際上只是一個ID,無論什麼包裝都是有意義的,而且客戶端JavaScript可以使用它。我擔心的是服務器端代碼與我的客戶端用例兼容。我很樂意調整解決問題。 –

回答

1

我必須做同樣的事情,和我落得這樣做是提交表單到隱藏的iframe。然後,可以在iframe onload處理程序中簡單地檢索來自php的響應。

其實,這裏是我使用的代碼:

$('submitdestination').onload=function(){ 
     var appID=this.contentDocument.body.children[0].innerHTML; 
     //did something with appID 
     new mBox.Notice({type: 'ok',delayClose: 1000,content: 'Data saved.',position: {y: 'bottom',x: 'right'}});//displayed message 
    } 
    $('cvdetails').submit(); 

注:submitdestination是我的iframe中。 cvdetails是我的形式。該表單的目標設置爲submitdestination。此外,我正在使用Mootools,以防有人在我的美元參數中注意到缺少的哈希值。

這裏是我使用的HTML的精簡版(雖然iframe是不變):

<form id="cvdetails" name="cvdetails" action="scripts/upload.php" method="post" enctype="multipart/form-data" target="submitdestination" autocomplete="off"> 
    <button type="button" id="save" class="mainbutton">Save</button> 
</form> 
<iframe id="submitdestination" name="submitdestination" style="display:none" ></iframe> 

保存按鈕有一個點擊處理程序,可以簡化爲:

$('save').addEvent('click',function(evt){evt.stop();$('cvdetails').submit();}) 
+0

當我研究這個,我看到了隱藏的iframe辦法提到,但我沒想到以捕捉'onload'處理程序的響應。你能鏈接到或發佈一些示例代碼嗎?我認爲人們會從一起看這些東西而獲益。 –

+0

我已經發布了代碼。儘管我在響應html的body標籤中輸出了一個或兩個元素,但我的情況與您的想法更類似。第一個孩子包含申請人的ID(這是爲了生成公司格式的單詞簡歷) –

+0

對不起,你再犯錯@Asad,但你也可以發佈隱藏的iframe的HTML和提交給它的表單嗎?我很樂意看到所有的組件。 –

0

感謝@Asad的幫助,我能夠以我想要的方式運作。全部放在一起,我基本上是這樣的代碼:

<html> 
    <head> 
     <script type="text/javascript"> 

window.onload = function(){ 
    setUploadID(-1); 
    document.getElementById('hidden_iframe').onload = captureUploadID; 
} 

function setUploadID(id) 
{ 
    document.getElementById('upload_id').innerHTML = id; 
} 

function captureUploadID() 
{ 
    var upload_id = this.contentDocument.body.childNodes[0].textContent; 
    setUploadID(upload_id); 
} 
     </script> 
    </head> 
    <body> 
     <form action="upload.php" enctype="multipart/form-data" method="POST" target="hidden_iframe"> 
      File: <input type="file" name="media" /><br> 
      <input type="submit" value="Upload" /> 
     </form> 
     <br> 
     Upload ID: <span id="upload_id"></span> 
     <iframe id="hidden_iframe" style="display: none;"></iframe> 
    </body> 
</html> 
相關問題