我想创建一个file drag and drop
功能。
我已经拖放从DIV工作和处理文件。
现在,我现在想这个文件追加到形式的Input[type=file]
。
我怎么能这样做?
我试图uploadFormData.append("files[]",f);
和衍生物,但它不工作。我调试是提交表单,检查头,看看文件被发送。
任何人都可以点我就如何实现这一目标的正确方向?
<form enctype="multipart/form-data" id="yourregularuploadformId">
<input type="file" name="files[]" multiple="multiple">
</form>
<script>
var uploadFormData = new FormData(jQuery("#yourregularuploadformId")[0]);
function handleFileSelect(evt) {
evt.stopPropagation();
evt.preventDefault();
var files = evt.dataTransfer.files; // FileList object.
// files is a FileList of File objects. List some properties.
var output = [];
for (var i = 0, f; f = files[i]; i++) {
output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
f.size, ' bytes, last modified: ',
f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
'</li>');
uploadFormData.append("files[]",f);
}
document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
}
</script>
恐怕你不能做这种方式,因为你不能动态地填补<input type="file" ....>
只是因为如果这是允许的,意味着你可以抓住从用户的计算机上的任何文件,而无需任何验证。
什么,你可以尝试做的是在你的DIV绑定像.change()
事件触发当一个文件被拖动,然后进行对地结合Ajax调用,将上传的文件,最后得到的文件名(或任何你想要的时候上传从AJAX回调过程中你想要的方式结束)
它可以将文件转换为Base64(使用FileReader
)并上传作为一个字符串
var input = document.getElementById('image');
function readImage(file, callback) {
var reader = new FileReader();
reader.onload = function() {
input.value = reader.result;
}
reader.readAsDataURL(file);
}
例如:https://codepen.io/ndan/pen/KJqZVd
的FileReader文档:https://developer.mozilla.org/en-US/docs/Web/API/FileReader/FileReader
PS。