使用 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

你可能需要这个检查我的Fiddle

    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_container').on('change click', '.file-wrapper input[type=file]', CUSTOMUPLOAD.fileInputs);
    var counter = 2;
    $('#del_file').hide();
        $('#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++;
        });

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

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

Answer 2

因为你有动态元素使用事件委托

$('#file_container').on('change click', '.file-wrapper input[type=file]', CUSTOMUPLOAD.fileInputs);

Answer 3

那是因为它们是动态附加的，你需要使用事件委托，例如

$('#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.