动态创建文件输入时，jQuery文件上传不起作用 [英] jQuery File Upload not working when file input dynamically created
问题描述
我正在使用这个jquery上传（ http://blueimp.github.io /jQuery-File-Upload/basic.html ），它的工作正常，当文件输入放在网站的原始代码，但我动态追加与jQuery的领域，它不工作。这里是jquery触发上传：
$ $ $''fileupload'）。fileupload（{
dataType： 'json'，
done：function（e，data）{
$ .each（data.result.files，function（index，file）{$ b $ alert（file.name）;
//$('<p/>').text(file.name).appendTo(document.body）;
}）;
}
}）;
这就是应该触发的上传：
< input class =fileuploadtype =filename =files []data-url =uploads />
以下是由jquery附加的代码：
$（document）.on（'click'，'。addItem'，function（）{
$（'<！ - ROW START - > ; \
< form class =widget-content itemdata-url =uploads /> \
< div class =row> \
< div class =col-md-3>< input type =textclass =form-controlname =itemName []>< / div> \
< ; div class =col-md-3>< textarea class =auto form-controlname =itemDescription []cols =20rows =1style =word-wrap：break-字体; resize：vertical;>< / textarea>< / div> \
< div class =col-md-3>< textarea class =auto form-control name =itemCondition []cols =20rows =1style =word-wrap：break-word; resize：vertical;>< / textarea>< / div> \
< input type =隐藏class =itemIdname =itemId []value => \
< input type =hiddenname =itemParent []value ='+ $（this）.closest（'。formHolder'）。data （'parent-room'）+'> \
< div class =col-md-2> \
< div class =fileinput-holder input-group > \
< input class =fileuploadtype =filename =files []> \
< / div> \
< / div> \
< div class =col-md-1 align-center>< i class =save icon-ok large> < / i>& nbsp;& nbsp;& nbsp;< i class =delete icon-trash large> < / div> \
< / div> \
< / form> \
<！ - / ROW END - > '）.fadeIn（500）.appendTo（$（本）。家长（）兄弟姐妹。（' 项目））;
$（this）.parent（）。parent（）。siblings（'。widget-header，.header-margin，.hide'）。removeClass（'hide'）。fadeIn（）;
}）;
就像我说的那样，当我将它添加到实际的代码中时，并不是动态的。有人可以帮忙吗？
这是因为你绑定 fileupload 事件元素添加之前。
尝试将代码移入回调函数，该函数将在您创建输入元素后执行。由于 appendTo（） 不支持回叫您可以使用 each（callback）：
$（'code_that_you_append'）。appendTo（'some_element'）。each（function（）{
//这里是$（'。fileupload'）。fileupload（{...}）function
} ）;
如果您需要将事件绑定到 .fileupload 在代码中的多个地方，你可以创建一个函数来避免代码重复，如下所示：
function bindFileUpload（）{
$（'。fileupload'）。fileupload（{
dataType：'json'，
done：function（e，data）{
$ .each（data.result.files ，函数（索引，文件）{
alert（file.name）;
}）;
}
}）;
};
，然后在回调中调用它，就像之前一样：
$（'code_that_you_append'）。appendTo（'some_element'）。each（function（）{
bindFileUpload（）;
}）;
我创建了小演示。它绑定点击而不是 fileupload 来简化事情（fileupload是外部插件...），但通用规则保持不变相同。
i am using this jquery uploader (http://blueimp.github.io/jQuery-File-Upload/basic.html) and it works fine when the file input is put in the raw code of the site, however i am dynamically appending the fields with jquery and it doesnt work. here is the jquery to trigger the upload:
$('.fileupload').fileupload({
dataType: 'json',
done: function (e, data) {
$.each(data.result.files, function (index, file) {
alert(file.name);
//$('<p/>').text(file.name).appendTo(document.body);
});
}
});
and this is what SHOULD trigger the upload:
<input class="fileupload" type="file" name="files[]" data-url="uploads/">
Here is the code that is appended by jquery:
$(document).on('click','.addItem', function(){
$('<!--ROW START-->\
<form class="widget-content item" data-url="uploads/">\
<div class="row">\
<div class="col-md-3"><input type="text" class="form-control" name="itemName[]"></div>\
<div class="col-md-3"><textarea class="auto form-control" name="itemDescription[]" cols="20" rows="1" style="word-wrap: break-word; resize: vertical;"></textarea></div>\
<div class="col-md-3"><textarea class="auto form-control" name="itemCondition[]" cols="20" rows="1" style="word-wrap: break-word; resize: vertical;"></textarea></div>\
<input type="hidden" class="itemId" name="itemId[]" value="">\
<input type="hidden" name="itemInventoryId[]" value="<?=$_GET["inventory_id"]?>">\
<input type="hidden" name="itemParent[]" value="'+$(this).closest('.formHolder').data('parent-room')+'">\
<div class="col-md-2">\
<div class="fileinput-holder input-group">\
<input class="fileupload" type="file" name="files[]">\
</div>\
</div>\
<div class="col-md-1 align-center"><i class="save icon-ok large"> </i> <i class="delete icon-trash large"> </i></div>\
</div>\
</form>\
<!--/ROW END-->').fadeIn(500).appendTo($(this).parents().siblings('.items'));
$(this).parent().parent().siblings('.widget-header, .header-margin, .hide').removeClass('hide').fadeIn();
});
like i say, when i add it into the actual code, not dynamically its fine. Can someone help please?
This is because you bind fileupload event before element is added.
Try moving your code into callback function which will be executed after you create input element. Since appendTo() doesn't support callback, you can use each(callback):
$('code_that_you_append').appendTo('some_element').each(function () {
// here goes $('.fileupload').fileupload({ ... }) function
});
If you need to bind event to .fileupload in multiple places in code, you can create a function to avoid code repetition, like this:
function bindFileUpload() {
$('.fileupload').fileupload({
dataType: 'json',
done: function (e, data) {
$.each(data.result.files, function (index, file) {
alert(file.name);
});
}
});
};
and then call it in the callback, like before:
$('code_that_you_append').appendTo('some_element').each(function () {
bindFileUpload();
});
I've created a little demo. It binds click instead of fileupload to simplify things (fileupload is external plugin...), but the general rule stays the same.
这篇关于动态创建文件输入时，jQuery文件上传不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
