Получения удержания ответа на стороне клиента после запроса загрузки файла

Я использую типичную форму на основе функциональных возможностей загружаемого файла с сервлет, как здесь 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, когда это возможно)

Спасибо

источник

2014-09-05 Snake

onsubmit ... предотвратить дефолт или вернуть ложные – cocco

использовать AJAX для загрузки файла. http://blog.teamtreehouse.com/uploading-files-ajax –

Если у вас есть обработчик AJAX, давайте посмотрим его. В противном случае, похоже, вы просите нас сделать вашу работу.[Learn ajax] (http://www.w3schools.com/jquery/jquery_ajax_intro.asp) – ncksllvn

Функция Аякса

//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()

EDIT

Также сама форма не нуждается во всех дополнительных атрибутах.

этого достаточно .... (нет метода, действие, ENCTYPE)

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

в качестве альтернативы добавить несколько в свой файл Imput загружать сразу несколько файлов.

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

если у вас есть какие-либо вопросы, просто спросите

источник

2014-09-05 16:52:45 cocco

Спасибо, кокко, но я заметил, что вы вызываете функцию php здесь. У моего бэкэнд нет PHP. Только сервлет, получающий запрос – Snake

oh sure ... просто измените местоположение. замените upload.php на правильные адреса для загрузки – cocco

UploadServlet ?? – cocco

Получения удержания ответа на стороне клиента после запроса загрузки файла

ответ

Смежные вопросы