我有点卡在这里,我需要帮助.. 我正在尝试在我的网站中进行拖放文件上传,我从头开始,因为我找不到任何适合我需要的插件。
这是我到目前为止所拥有的:
文件删除检测:
var dropzone = document.getElementById('holder');
dropzone.ondragover = function(){
this.className = 'well pull-left display-ex-pic drag_hover';
return false;
}
dropzone.ondragleave = function(){this.className = 'well pull-left display-ex-pic'; return false;}
dropzone.ondrop = function(e){
e.preventDefault();
this.className = 'well pull-left display-ex-pic';
readURLs(e.dataTransfer.files);//display the pictures
images = e.dataTransfer.files;
images_obj = e.dataTransfer;
}
通过AJAX提交表单:
formImages = new FormData();
var status = $('#status');
$('#image_upload').hide();
$('form').ajaxForm({
beforeSend: function() {
$('#image_upload').show();
$('#math li .mathquill-editable').each(function() {
a = $('#math-text').val();
$('#math-text').val(a + $(this).mathquill('latex') + '[{line}]');
});
for (var x = 0; x < images.length; x = x + 1) {
formImages.append(images[x].fileName, images[x]);
}
},
data: {'files[]': formImages},
uploadProgress: function(event, position, total, percentComplete) {
var percentVal = percentComplete + '%';
$('#image_upload').attr('aria-valuenow', percentComplete).css('width', percentComplete + '%').html(percentComplete + '%');
},
complete: function(xhr) {
status.html(xhr.responseText);
}
});
现在我的问题是,用户删除文件后,文件使用 e.dataTransfer.files
进入文件数组,然后我想提交带有进度条的这些文件以及所有使用此处的“jQuery 表单插件”获取表单数据 http://malsup.com/jquery/form/ .
有人知道如何使用“jQuery 表单插件”手动发送文件吗?
最佳答案
我碰巧发现了这个插件,它在很短的实现时间内就完美地工作了。
http://www.dropzonejs.com/#installation
基本上:
- 包含插件
- 包含 HTML
- 对文件进行编码
- 服务器端的接收器(示例包含在 URL 中)
- 调整 CSS。
关于javascript - 使用 "jQuery Form Plugin"手动发送拖放文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26049244/