Php 没有AJAX的HTML5拖放是可能的吗?
我尝试在没有ajax的情况下创建一个HTML5上传程序,因为我必须创建一个带有输入名称的目录。我试着让它像正常人一样工作Php 没有AJAX的HTML5拖放是可能的吗?,php,javascript,jquery,html,file-upload,Php,Javascript,Jquery,Html,File Upload,我尝试在没有ajax的情况下创建一个HTML5上传程序,因为我必须创建一个带有输入名称的目录。我试着让它像正常人一样工作 <input type="file" /> 但我不能得到tmp_的名字谁是在$_文件时,它是一个正常的上传。我只能用文件的mozFullPath上传吗?这是我的代码,dropzone运行良好 <script> var filesUploaded = new Array(); var dropZoneElement = docum
<input type="file" />
但我不能得到tmp_的名字谁是在$_文件时,它是一个正常的上传。我只能用文件的mozFullPath上传吗?这是我的代码,dropzone运行良好
<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>
var filesuppload=新数组();
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);
功能(事件){
event.preventDefault();
event.stopPropagation();
//可以从放置区域中删除样式
}
函数onDragEnter(事件){
event.preventDefault();
event.stopPropagation();
//可以将样式添加到放置区域
}
功能(事件){
event.preventDefault();
event.stopPropagation();
event.dataTransfer.effectAllowed=“复制”;
event.dataTransfer.dropEffect=“复制”;
}
onDrop功能(事件){
event.preventDefault();
event.stopPropagation();
console.log(event.dataTransfer);
onFileSelected(event.dataTransfer.files);
}
所选函数(文件){
var dropZoneElement=document.getElementById(“dropZone”);
对于(var i=0;i而言,如果不使用XMLHttpRequest
和适当的序列化程序(如)则不可能这样做
如果您不想要AJAX,则需要Flash/Java或使用:
<input name="myfiles[]" type="file" multiple="multiple" />
不必考虑所有这些。只需使用FormData
,它将负责构造正确的头文件,这意味着您将拥有正确的$\u文件
变量服务器端
var datas = new FormData( 'form-name' );
filesUploaded.forEach( function( file, index ) {
datas.append( 'file' + index, file );
} );
但是,您必须通过XHR发送以下数据:
xhr.send( datas );
手动构造DOM文件输入元素似乎是不可能的。不过,您没有理由不使用AJAX。Javascript是客户端…不,如果没有服务器端脚本,就不可能将某些内容保存到服务器。如果没有AJAX?当然可以,只需实现flash或java应用程序上载程序即可。:)现在,如果您想在没有flash/java的情况下保持HTML5的整洁,请使用Ajax。@Daedalus-问题并不是说不使用服务器端代码,而是说“没有Ajax”。它被标记为“PHP”…为什么这里有这么多的垃圾?我只是说没有Ajax,我就去-2…我想要建议,我不想被人欺负或攻击。标签上写着PHP!变量$\u文件是服务器端的…如果没有Ajax,你仍然可以使用iFrame黑客。这不是我的问题…我已经得到了输入文件…变量$\u文件是服务器端的…该死,所有的我想我们都是傻瓜…@Mikebootin那么你的$\u文件中有什么呢?是空的吗?