【发布时间】：2015-04-06 16:36:14
【问题描述】：
我正在尝试使用 Blueimp 的 jQuery File Upload 插件实现目录上传。 Rails 4 是我的后端，对于附件，我使用的是 Carrierwave。
现在的问题是，jquery 插件无法识别我正在上传的文件夹。我已经在输入字段中传递了 webkitdirectory 参数。有人可以帮我解决这个问题吗？
提前致谢。
这是 application.js 中的 jQuery 文件上传代码：
$('#fileupload').fileupload({
dataType: "script",
sequentialUploads: true,
// This function is called when a file is added to the queue;
// either via the browse button, or via drag/drop:
add: function(e, data) {
data.context = $(tmpl("template-upload", data.files[
0]))
data.context.addClass('working');
//$('.upload-status-box').addClass('working');
$('#Upload-Bar').append(data.context);
$('.upload-status-box').show();
// Listen for clicks on the cancel button
data.context.find('span.cancel-upload').click(
function() {
jqXHR.abort();
data.context.fadeOut(function() {
data.context.remove();
});
count = count - 1;
removeUploadStatusBoxOnCompletion();
});
var jqXHR = data.submit();
count = count + 1;
},
progress: function(e, data) {
if (data.context) {
$('.upload-status-box').show();
progress = parseInt((data.loaded / data.total) *
100);
var uploadMeta = parseInt(data.loaded / 1000000) +
"/" + parseInt(data.total / 1000000) +
" MB - " + progress + "%";
data.context.find('.progress-bar').css('width',
progress + '%');
data.context.find('.status').text(uploadMeta);
}
},
done: function(e, data) {
console.log(
'Your files have been uploaded successfully!'
);
// alert('Your files have been uploaded successfully! Depending on the file size, you might have to wait for a while before performing any actions.');
count = count - 1;
data.context.removeClass('working');
data.context.find('button.cancel-upload').hide();
removeUploadStatusBoxOnCompletion();
}
});
这是我的输入字段：
<div class="awesome-file-uploads" id="inline-upload-status">
<%= form_for [myfolder, Myfile.new], html: { multipart: true, :id => "fileupload" } do |f| %>
<%= f.file_field :attachment, multiple: true, id: "fileinput", style: "display:none;", "webkitdirectory"=> "", "directory"=> "" %>
<%= f.hidden_field :myfolder_parent_id, value: myfolder.id %>
<% end %>
以下是上传和处理文件夹内文件的代码：
$('#folderupload').change(function(e) {
e.preventDefault();
NProgress.done();
var items = e.target.files;
var paths = ""; //
// var myfolder_id = $(this).parent();
for (var i=0, file; file=items[i]; i++) {
paths += file.webkitRelativePath+"###";
} //
// uploadFiles(items, myfolder_id.data('inside'));
$("#paths").val(paths);
$("#folderupload").submit(); //
});
function uploadFiles(items, myfolder_id){
xhr = new XMLHttpRequest();
data = new FormData();
paths = "";
var AUTH_TOKEN = $('meta[name=csrf-token]').attr('content');
data.append('authenticity_token', AUTH_TOKEN);
// Set how to handle the response text from the server
xhr.onreadystatechange = function(ev){
console.debug(xhr.responseText);
};
for (var i=0, file; file=items[i]; i++) {
paths += file.webkitRelativePath+"###";
data.append(i, file);
}
data.append('paths', paths);
xhr.open('POST', "/myfolders/"+myfolder_id+"/create_from_folder", true);
xhr.send(this.data);
}
【问题讨论】：
-
邮政编码，否则我们将不知道您要做什么...
-
很抱歉。我已经为你添加了代码！
-
您能澄清一下jquery 插件无法识别我正在上传的文件夹 是什么意思吗？
-
您设置 jQFileupload 是否有特定原因，然后自己手动使用
$('#folderupload').change和uploadFiles上传文件？为什么不使用 jQFileupload？ -
您是要上传整个文件夹及其子目录，还是要指定它们应该上传到哪里？
标签： jquery ruby-on-rails google-chrome jquery-file-upload