我尝试在没有ajax的情况下制作HTML5上传器，因为我必须创建一个带有输入名称的目录。我试图让它像正常人一样工作
<input type="file" />
但是当正常上传时，我无法获得_FILES美元中的tmp_name。我可以只使用文件的 mozFullPath 上传吗？有我的代码，拖放区运行良好。
<script>
var filesUploaded = new Array();
var dropZoneElement = document.getElementById("dropZone");
dropZoneElement.addEventListener('dragleave', onDragLeave, false);
dropZoneElement.addEventListener('dragenter', onDragEnter, false);
dropZoneElement.addEventListener('dragover', onDragOver, false);
dropZoneElement.addEventListener('drop', onDrop, false);
function onDragLeave(event) {
event.preventDefault();
event.stopPropagation();
//you can remove a style from the drop zone
}
function onDragEnter(event) {
event.preventDefault();
event.stopPropagation();
//you can add a style to the drop zone
}
function onDragOver(event) {
event.preventDefault();
event.stopPropagation();
event.dataTransfer.effectAllowed = "copy";
event.dataTransfer.dropEffect = "copy";
}
function onDrop(event) {
event.preventDefault();
event.stopPropagation();
console.log(event.dataTransfer);
onFilesSelected(event.dataTransfer.files);
}
function onFilesSelected(files) {
var dropZoneElement = document.getElementById("dropZone");
for (var i=0; i<files.length; i++) {
filename = files[i]['name'];
filesrc = files[i]['mozFullPath'];
filesize = files[i]['size'];
filetype = files[i]['type'];
filesUploaded[i] = filesrc;
var span = document.createElement("span");
span.setAttribute('class','fileUpload');
dropZoneElement.appendChild(span);
var reader = new FileReader();
reader.onload = function (files) {
span.innerHTML = '<i class="icon-file"></i> ' + filename;
};
reader.readAsDataURL(files[i]);
}
}
</script>
谢谢大家的建议和帮助！
不要关心这一切。只需使用 FormData，它将负责构造正确的标头，这意味着您将拥有正确的$_FILES变量服务器端。
var datas = new FormData( 'form-name' );
filesUploaded.forEach( function( file, index ) {
datas.append( 'file' + index, file );
} );
但是，您被迫通过XHR发送数据，如下所示：
xhr.send( datas );
手动构造 DOM 文件输入元素似乎是不可能的。不过，您没有理由不使用 AJAX。
如果不使用 XMLHttpRequest 和适当的序列化程序（如 FormData ），这是不可能的。
如果你不想要AJAX，要么需要Flash/Java，要么使用：
<input name="myfiles[]" type="file" multiple="multiple" />