jquery - jQuery 的 clone() 和 POST 请求的奇怪行为

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');
    });
});

upload 不需要用 $() 包裹，因为它已经是一个 jQuery 对象了