HTML5拖放没有AJAX是可能的
HTML5 drag N drop without AJAX is it possible?
我尝试在没有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" />
相关文章:
- EaseJS拖放;放下(动画CC)电影剪辑的鼠标坐标
- 为什么HTML5拖放的目标是孩子?(可排序列表)
- HTML/CSS-用于拖放的全页面覆盖
- Rubaxa可与聚合物进行排序/拖放不起作用,具体取决于显示器:
- dblclick事件是在jquery拖放后触发的
- 无法进行拖放以使用本地存储
- 如何使用Java脚本创建提交按钮's的拖放功能
- Chrome原生拖放相对容器并不能正确渲染重影
- 如何在Javascript中创建排序、拖放多级列表
- html5拖放文件-在提交整个表单时上传
- 拖放文件上传无需AJAX,在前台同步
- 无法在$AJAX之后拖放
- 使用 ajax 拖放功能对列字段重新排序?PHP/jQuery.
- HTML5拖放没有AJAX是可能的
- 拖放和AJAX保存后重复记录
- HTML拖放OnDrop Ajax事件
- 拖放(事件)不会触发ajax POST
- Jquery在Ajax加载的Div上拖放
- 是否有可能使用HTML拖放文件上传,但没有AJAX / XHR
- 通过Ajax调用删除和追加列表后,拖放列表不工作