2014-09-05 104 views
0

我現在用的是典型的形式上傳文件功能,使用Servlet等之後,在客戶端的響應保持在這裏 http://www.tutorialspoint.com/servlets/servlets-file-uploading.htm獲取文件上傳請求

客戶端代碼

<html> 
<head> 
<title>File Uploading Form</title> 
</head> 
<body> 
<h3>File Upload:</h3> 
Select a file to upload: <br /> 
<form action="UploadServlet" method="post" 
         enctype="multipart/form-data"> 
<input type="file" name="file" size="50" /> 
<br /> 
<input type="submit" value="Upload File" /> 
</form> 
</body> 
</html> 

的問題在於,在服務器端,我將json輸出寫入響應對象(流)。在客戶端,它正在做一個重定向。基本上,重定向到一個只顯示json輸出的頁面。

在客戶端,我如何控制響應?我想解析JSON並對它做些什麼,但是我找不到「鉤子」或如何獲得輸出。我使用Javascript和HTML我的客戶端(和AJAX如果可能)

謝謝

+0

的onsubmit ......防止違約或返回false – cocco 2014-09-05 16:44:33

+0

使用Ajax來上傳文件。 http://blog.teamtreehouse.com/uploading-files-ajax – 2014-09-05 16:45:44

+0

如果你有一個AJAX處理程序,讓我們來看看它。否則,你似乎在要求我們做你的工作。[Learn ajax](http://www.w3schools.com/jquery/jquery_ajax_intro.asp) – ncksllvn 2014-09-05 16:46:57

回答

0

Ajax的功能

//url,callback,type,FormData,uploadFunc,downloadFunc 
function ajax(a,b,e,d,f,g,c){ 
c=new XMLHttpRequest; 
!f||(c.upload.onprogress=f); 
!g||(c.onprogress=g); 
c.onload=b; 
c.open(e||'get',a); 
c.send(d||null) 
} 

https://stackoverflow.com/a/18309057/2450730 適用於所有最新的瀏覽器,包括移動。

就緒功能

function rdy(){ 
console.log(this.response)// or JSON.parse(this.response) if json 
} 

進展

function progressup(e){ 
console.log(e.loaded/e.total)// or (e.loaded/e.total*100|0)+'%' to get the percent 
} 

設置形式

假設您的形式是第一位的,你只是阻止它的默認行爲,創造一個自定義樂趣在這種情況下,ajax發送表單。

window.onload=function(){ 
document.forms[0].onsubmit=function(e){ 
    e.preventDefault(); 
    ajax('upload.php',rdy,'post',new FormData(this),progressup) 
} 
} 

這是你所需要的,因爲你可以看到代碼是短暫的...但它有你需要的一切。

注:每一種類型的形式被接受......所以你不必...這得益於採用new FormData()

編輯費心編寫額外的代碼來讀取表單值

而且表單本身並不需要所有這些額外的屬性。

這就夠了......(沒有方法,行動,加密類型)

<form><input type="file" name="file"><input type="submit" value="GO"></form> 

或者添加多個到您的文件稱輸入上傳多個文件。

<input type="file" name="file" multiple> 

,如果您有任何問題,只是問

+0

謝謝cocco,但我注意到你在這裏調用php函數。我的後端沒有PHP。只有servlet收到請求 – Snake 2014-09-05 17:14:37

+0

哦,當然...只是改變位置。用正確的上傳地址替換upload.php – cocco 2014-09-05 17:15:59

+0

UploadServlet? – cocco 2014-09-05 17:16:32