jquery - 使用 jQuery 动态添加自定义 HTML 表单文件输入

Question

我有一些 jQuery、JavaScript 和 CSS，它们允许我自定义 HTML 表单文件输入的外观。我还有一些 jQuery，允许用户动态添加所需数量的附加文件。

我遇到的问题是，在用户选择第一个文件、按“添加”并添加第二个文件后，自定义输入类型的行为不适用。

我有一个 JSFiddle，您可以在此处查看:

JSFiddle - Dynamically Add Customized HTML File Inputs

HTML

<div id="file_container">
  <span class="file-wrapper"><input type="file" name="files[]"><span class="file-button">Choose File</span></span><br>
  <div id="file_tools">
    <img src="http://i59.tinypic.com/5niuxd.png" id="add_file" title="Add Another File">
    <img src="http://i60.tinypic.com/102ktmq.png" id="del_file" title="Remove Last File">
  </div>
</div>

JavaScript/jQuery

var CUSTOMUPLOAD = CUSTOMUPLOAD || {};

CUSTOMUPLOAD.fileInputs = function() {
  var $this = $(this),
      $val = $this.val(),
      valArray = $val.split('\\'),
      newVal = valArray[valArray.length-1],
      $button = $this.siblings('.file-button'),
      $fakeFile = $this.siblings('.file-holder');
  if(newVal !== '') {
    $button.text('File Chosen');
    if($fakeFile.length === 0) {
      $button.after('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class=file-holder> ' + newVal + '</span>');
    } else {
      $fakeFile.text(newVal);
    }
  }
};

$(document).ready(function() {
    $('.file-wrapper input[type=file]').bind('change click', CUSTOMUPLOAD.fileInputs);
    var counter = 2;
    $('#del_file').hide();
        $('img#add_file').click(function(){
            $('#file_tools').before('<p><span class="file-wrapper" id="f'+counter+'"><input type="file" name="files[]"/><span class="file-button">Choose File</span></span></p>');
            $('#del_file').fadeIn(0);
        counter++;
        });

        $('img#del_file').click(function(){
            if(counter==3){
                $('#del_file').hide();
            }           
        counter--;

        $('#f'+counter).remove();
    }); 
});

CSS

.file-wrapper{font-size:11px;cursor:pointer;display:inline-block;overflow:hidden;position:relative;}
.file-wrapper .file-button{width:auto;display:inline-block;font-size:14px;font-weight:bold;background:#1468b3;color:#fff;cursor:pointer;padding:8px 20px;text-transform:uppercase;border:1px solid #fff;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
.file-wrapper input{font-size:100px;cursor:pointer;height:100%;position:absolute;right:0;top:0;filter:alpha(opacity=1);-moz-opacity:0.01;opacity:0.01;}

Answer 1

这是因为它们是动态附加的，您需要使用事件委托(delegate)，例如

$('#file_container').on('click', 'img#add_file', function(){
        $('#file_tools').before('<p><span class="file-wrapper" id="f'+counter+'"><input type="file" name="files[]"/><span class="file-button">Choose File</span></span></p>');
        $('#del_file').fadeIn(0);
        counter++;
 });

Full jsFiddle here.