Загрузить файл с помощью Ajax XmlHttpRequest
Привет, Я пытаюсь отправить файл с xmlhttprequest с этим кодом.
<script>
var url= "http://localhost:80/....";
$(document).ready(function(){
document.getElementById('upload').addEventListener('change', function(e) {
var file = this.files[0];
var xhr = new XMLHttpRequest();
xhr.file = file; // not necessary if you create scopes like this
xhr.addEventListener('progress', function(e) {
var done = e.position || e.loaded, total = e.totalSize || e.total;
console.log('xhr progress: ' + (Math.floor(done/total*1000)/10) + '%');
}, false);
if ( xhr.upload ) {
xhr.upload.onprogress = function(e) {
var done = e.position || e.loaded, total = e.totalSize || e.total;
console.log('xhr.upload progress: ' + done + ' / ' + total + ' = ' + (Math.floor(done/total*1000)/10) + '%');
};
}
xhr.onreadystatechange = function(e) {
if ( 4 == this.readyState ) {
console.log(['xhr upload complete', e]);
}
};
xhr.open('post', url, true);
xhr.setRequestHeader("Content-Type","multipart/form-data");
xhr.send(file);
}, false);
});
</script>
но я получил эту ошибку: запрос был отклонен, потому что не было найдено многострочной границы
помогите мне PLS..
Ответы
Ответ 1
- Нет такой вещи, как
xhr.file = file;
; объект файла не должен быть прикреплен таким образом.
-
xhr.send(file)
не отправляет файл. Вы должны использовать объект FormData
, чтобы обернуть файл в объект данных post multipart/form-data
:
var formData = new FormData();
formData.append("thefile", file);
xhr.send(formData);
После этого к файлу может быть доступ в $_FILES['thefile']
(если вы используете PHP).
Помните, MDC и демо-версии Mozilla Hack - это ваши лучшие друзья.
РЕДАКТИРОВАТЬ. Неправильно указан (2). Он отправляет файл, но он будет отправлять его в качестве исходных данных. Это означает, что вам придется анализировать его самостоятельно на сервере (и это часто невозможно, зависит от конфигурации сервера). Узнайте, как получить исходные данные в PHP здесь.