更新

Question

使用jQuery，我试图在单击按钮时动态地乘以表单元素（文件上传框）。这是代码：

$(document).ready(function () {
    $('#new-image').click(function () {
        var idx = $('.input.file').size();
        var upload = $('.input.file:first-child').clone();
        $(upload.find('label')).attr('for', 'Attachment'+idx+'File');
        $(upload.find('input[type=file]')).attr('name', 'data[Attachment]['+idx+'][file]');
        $(upload.find('input[type=file]')).attr('id', 'Attachment'+idx+'File');
        upload.insertBefore('#new-image');
        return false;
    });
});

问题是，如果我尝试修改输入的名称，我会在帖子请求中得到类似的内容 - 取自Chrome的（开发构建）控制台，也可以在Firefox（3.6）上使用。

------WebKitFormBoundaryMXYcXg2mbP1HZsVJ
Content-Disposition: form-data; name="data[Attachment]â€‹[3]â€‹[file]"; filename="logo.png"
Content-Type: image/png

这不是因为字符串连接，我尝试使用硬编码值，并且请求中的怪异仍然存在。我在这里遗漏了什么或者这是jQuery中的错误吗？

（如果有人想知道，名称属性格式 - data[...来自CakePHP）

更新

问题似乎不是因为.attr()，而是因为.clone()。我相应地修改了这个问题。

我觉得这很有效：

upload.find('input[type=file]').name = 'data[Attachment]['+idx+'][file]';
// wrong -> find returns a jQuery object and setting name has no effect

因为我没有尝试添加多个文件，我只是尝试了最后添加的字段:)。它甚至以正确的形式也不起作用：

upload.find('input[type=file]').get(0).name = 'data[Attachment]['+idx+'][file]';
// I still get mumbo-jumbo in the post, between the ][ characters

我刚试过没有clone()而且它确实有效，这次是真的:)。

$('#new-image').click(function () {
    var idx = $('.input.file').size();
    var upload = $('<div class="input file"><label for="Attachment'+idx+'File">File</label><input type="file" name="data[Attachment]['+idx+'][file]" id="Attachment'+idx+'File"></div>');
    upload.insertBefore('#new-image');
    return false;
});

有没有人知道为什么clone()会这样做？

Answer 1

试试这个：

<div class="file">
    <div>
        <label for="Attachment0File">File: </label>
        <input type="file" name="data[Attachment][file][]" id="Attachment0File" />
    </div>
</div>
<button type="button" id="new-image">New</button>

$(document).ready(function () {
    $('#new-image').click(function (e) {
        e.preventDefault();
        var idx = $('.file').length;
        $('.file:first-child').clone(true, true)
            .find('label').attr('for', 'Attachment'+idx+'File').end()
            .find('input[type="file"]').attr('name', 'data[Attachment][file][]').attr('id', 'Attachment'+idx+'File').end()
            .insertBefore('#new-image');
    });
});

上传不需要用$（）包装，因为它已经是jQuery对象

使用jQuery的clone（）和POST请求的奇怪行为

更新

1 个答案: