0
如何获取XMLHttpRequest中的实际文件? 使用evt.target.files会返回一个fileList对象,并且我无法抓取php端的实际文件,以便在服务器上保存。如何获取XMLHttpRequest中的实际文件?
下面是代码,我已经连接显示的responseText从PHP代码print_r($_POST);
function handleFileSelect(evt) {
reader = new FileReader();
reader.onload = function(e) {
// Ensure that the progress bar displays 100% at the end.
progress.style.width = '100%';
progress.textContent = '100%';
setTimeout("document.getElementById('progress_bar').className='';", 2000);
///////////THE JSON/////////////to encase file in JSON object
var sendFile = function(url, successHandler, errorHandler) {
var xhr = typeof XMLHttpRequest != 'undefined' ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
xhr.open('post', url, true);
//XHR progress tracking
xhr.upload.onprogress = function(event) {
//var native_progress = document.getElementById("native_progress");
//alert('in native_progress function');
if (event.lengthComputable) {
var complete = (event.loaded/event.total * 100 | 0);
native_progress.value = native_progress.innerHTML = complete;
}
};
xhr.onreadystatechange = function() {
var status;
var data;
// https://xhr.spec.whatwg.org/#dom-xmlhttprequest-readystate
if (xhr.readyState == 4) { // `DONE`
status = xhr.status;
if (status == 200) {
//data = JSON.parse(xhr.responseText);
data = xhr.responseText;
successHandler && successHandler(data);
} else {
errorHandler && errorHandler(status);
}
}
};
var formData = new FormData();
formData.append('file', evt.target.files[0]);
//xhr.setRequestHeader("Content-type", "multipart/gorm-data");
//xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(formData);
};
sendFile('/ePub_Reader/temp_upload/save.php', function(data) {
alert('Response Text: ' + data);
}, function(status) {
alert('Something went wrong.');
});
///////////THE JSON - end/////////////
// Read in the image file as a binary string.
//reader.readAsBinaryString(evt.target.files[0]);
reader.readAsDataURL(evt.target.files[0]);
}
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
谢谢穆萨。但是我多次更改了代码,并在我的文章中错误地放置了'evt.target.files'而没有'[0]'。我遍历数组选择'[i]'项目。\ n现在要清楚,我已经测试了以下内容,'var formData = new FormData(); \t \t \t formData.append('file',evt.target.files [0]); \t \t alert(evt.target.files [0] ['size']); \t \t alert(evt.target.files [0]);',大小给'663732字节',第二个警告给'[object file]',但是当我返回'print_r($ _ POST ['file']] );'我得到'[object filelist]'和'fwrite($ name_handle,$ _POST ['file']);'保存一个只有17byte的'损坏'文件。 – akeem
文件信息存储在'$ _FILES'而不是'$ _POST' – Musa
好。使用'$ _FILES [ '文件']'如果得到一个数组的responseText'阵列 ( [名称] => Saved_Book.epub [型] =>应用/ epub的+拉链 [tmp_name的值] => /应用程序/ MAMP/tmp/php/phpoUpcZ6 [error] => 0 [size] => 663732 )'。而'fwrite()'函数存储一个0字节的“损坏”文件。 – akeem