Question

我想在我的应用程序中创建文件上传功能。通常我的表单包含1个文件字段。但我想让用户在需要时拥有更多。所以我用这种方式创建了它：

HTML

<div class="att" id="c1">
    <input type="file" name="c1" size="200" /><br>
    <input type="button" value="Add more files" id="more" />
</div>

jQuery

$('#more').on('click',function(){
    q = $('.att').length;
    c = $('#c1').html();
    n = q + 1;
    f = c.replace('c1','c'+n);
    $('#c'+q).after('<div>'+f+'</div>');
})

您可以看到我的代码现场演示here。

到目前为止，一切运作良好。但我遇到的问题是访问新的JavaScript构建元素以命名它们。我需要有文件字段，其名称如c1，c2，c3，...但是所有新创建的元素都将其名称命名为“c2”。看起来我的代码在计算“.att”元素的长度方面存在一些问题，因为其中只有一个是HTML原生元素，而其他元素是用JavaScript构建的。

你有什么想法吗？

Answer 1

正如@Rayon所说，你通过使用jQuery获得了innerHTML

c = $('#c1').html();

你必须让outerHTML拥有属性。你需要正则表达式替换/c1/g来替换所有发生的字符串。你的代码应该是这样的：

$('#more').on('click',function(){
    q = $('.att').length;
    c = $('#c1')[0].outerHTML;
    n = q + 1;
    f = c.replace(/c1/g,'c'+n);
    $('#c'+q).after(f);
})

Answer 2

正如Rayon和其他人先前指出的那样;问题是通过调用.html()我们得到DOM元素的内部html而不是那个特定DOM元素的html。因此，每次只添加文件元素而不是其容器元素。因此$('.att').length返回的计数为1。为了克服这个问题，您可以尝试以下代码：

$(document).ready(function(){
  $('#more').on('click',function(){
        q = $('.att').length;
        c = $('#c1').html();

        n = q + 1;
        f = c.replace('c1','c'+n);

        $('#c'+q).after('<div class="att" id="c'+n+'" >'+f+'</div>'); //instead of putting new file element in blank div; lets add attrs like class and id to it

    })
})

Answer 3

似乎更好的想法更新您的输入如下：

<input type="file" id="fileUpload" multiple />

以编程方式使用FormData()在发布时重命名文件。

查看https://developer.mozilla.org/en/docs/Web/API/FormData

Answer 4

您需要进行小幅修正才能将class和id添加到要添加的新div

    $('#c'+q).after('<div class="att" id="c'+n +'">'+f+'</div>');

更正示例

＆＃13;

$('#more').on('click',function(){
        q = $('.att').length;
        c = $('#c1').html();
        n = q + 1; 
        f = c.replace('c1','c'+n);
        $('#c'+q).after('<div class="att" id="c'+n +'">'+f+'</div>');  console.log(f);
    })

＆＃13;

input[type=file] {
  border: 1px solid silver;
  margin-bottom:5px;
  padding: 5px
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="att" id="c1">
    <input type="file" name="c1" size="200" />
</div>
<br>
<input type="button" value="Add more files" id="more" />

＆＃13;

Answer 5

＆＃13;

$('#more').on('click', function() {
  var q = $('.att').length;
  c = $('[name="c1"]').clone().get(0).outerHTML;
  n = q + 1;
  f = c.replace('c1', 'c' + n);
  $('#c' + q).after('<div class="att" id="c'+n+'">' + f + '</div>');
});

＆＃13;

input[type=file] {
  border: 1px solid silver;
  margin-bottom:5px;
  padding: 5px
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="att" id="c1">
  <input type="file" name="c1" size="200" />
  <br>

</div>
<input type="button" value="Add more files" id="more" />

＆＃13;

如何使用jQuery访问JavaScript构建的元素？

5 个答案: