使用 jQuery 插入文件输入元素

发布于 2024-12-01 13:14:47 字数 786 浏览 0 评论 0原文

我在使用 jQuery 插入文件输入元素时遇到问题。我想要发生的是，当用户使用输入元素选择文件时，jQuery 应该隐藏该输入并在其位置插入一个新的文件输入。

这是我的相关标记：

<div id="select_images">
    <input type="file" name="images[]" multiple="multiple" />
</div>

和我的 Javascript：

$('#select_images input').change(function(){
    // User selected some images to upload, hide this file input
    $(this).css('right', '-10000px');

    // Insert a new file input to take its place
    $('#select_images').append('<input type="file" name="images[]" multiple="multiple" />');
});

它有点有效。当我使用页面上已有的文件输入选择一个文件时，jQuery 会隐藏它并插入一个新文件。然而，当我尝试再次执行相同操作时，jQuery 不会插入新的文件输入。

我看不出上面的代码只会插入一个额外的文件输入的任何原因，所以我很困惑。我已经使用 Firebug 和将表单数据发布到我的后端脚本来确认此行为。

任何帮助表示赞赏。谢谢！

原文

I'm having trouble inserting file input elements with jQuery. What I want to happen is when a user selects a file using the input element, jQuery should hide that input and insert a new file input in its place.

Here's my relevant markup:

<div id="select_images">
    <input type="file" name="images[]" multiple="multiple" />
</div>

And my Javascript:

$('#select_images input').change(function(){
    // User selected some images to upload, hide this file input
    $(this).css('right', '-10000px');

    // Insert a new file input to take its place
    $('#select_images').append('<input type="file" name="images[]" multiple="multiple" />');
});

It kind of works. When I select a file using the file input already on the page, jQuery hides it and inserts a new one. When I try to do the same again however, jQuery does not insert a new file input.

I can't see any reason that the above code will only insert one additional file input, so I'm pretty stumped. I've confirmed this behaviour using both Firebug and POSTing the form data to my backend script.

Any help is appreciated. Thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

少女七分熟 2024-12-08 13:14:47

尝试使用 live

$('#select_images input').live('change',function(){...

当您动态地将元素添加到 DOM 时，事件处理程序不会自动附加到它们，要将事件处理程序附加到动态添加的元素，您可以使用 .live 或 。委托

委托示例

$("#select_images").delegate('input','change',function(){
//handler code here

});

.live

.delegate

何时应该使用 jQuery 的 Live 和委托方法

try using live

$('#select_images input').live('change',function(){...

when you dynamically add the elements to the DOM the event handlers do not automatically get attached to them, to attach the event handlers to the dynamically added elements you can use .live or .delegate

example with delegate

$("#select_images").delegate('input','change',function(){
//handler code here

});

.live

.delegate

When You Should Use jQuery’s Live and Delegate Methods

回复收藏 0 原文

愛上了 2024-12-08 13:14:47

您添加的新输入没有任何 onchange 事件处理程序。如果将事件处理程序放入命名函数中，则可以轻松地将其绑定到您创建的新输入：

function handleChange(){
  // User selected some images to upload, hide this file input
  $(this).css('right', '-10000px');

  // Insert a new file input to take its place
  $('#select_images').append(
    $('<input type="file" name="images[]" multiple="multiple" />').change(handleChange)
  );
}

$('#select_images input').change(handleChange);

The new input that you have added doesn't have any onchange event handler. If you put the event handler in a named function, you can easily bind it to the new input that you create:

function handleChange(){
  // User selected some images to upload, hide this file input
  $(this).css('right', '-10000px');

  // Insert a new file input to take its place
  $('#select_images').append(
    $('<input type="file" name="images[]" multiple="multiple" />').change(handleChange)
  );
}

$('#select_images input').change(handleChange);

回复收藏 0 原文

~没有更多了~