使用jQuery动态添加自定义HTML表单文件输入 [英] Dynamically Add Customized HTML Form File Input with jQuery

问题描述

我有一些jQuery，JavaScript和CSS，允许我自定义HTML表单文件输入的外观。我也有一个jQuery，允许用户动态添加尽可能多的文件，因为他们需要附加。

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

我有一个JSFiddle您可以在这里查看： / p>

JSFiddle - 动态添加自定义HTML文件输入

HTML

 < div id =file_container> 
< span class =file-wrapper>< input type =filename =files []>选择文件< / span> ;< / span>< br> 
< div id =file_tools> 
< img src =http://i59.tinypic.com/5niuxd.pngid =add_filetitle =添加其他文件> 
< img src =http://i60.tinypic.com/102ktmq.pngid =del_filetitle =删除最后文件> 
< / 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;< 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'）。 （'#file_tools'）。before（'< p>< span class =file-wrapperid =f'+ counter +'>< input type =filename =files [] />< / 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。 ; 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;} 
文件包装输入{font-size：100px; cursor：pointer; height：100％ ; position：absolute; right：0; top：0; filter：alpha（opacity = 1）;  -  moz-opacity：0.01; opacity：0.01;} 
   
 $ 
 b $ b 
  $（'＃file_container'）。on（'click'，'img＃add_file'，function（）{
 $（'＃file_tools'） .before（'< p>< span class =file-wrapperid =f'+ counter +'>< input type =filename =files []/>< span class =file-button>选择文件< / span>< / span>< / p& 
 $（'＃del_file'）。fadeIn（0）; 
 counter ++; 
}）; 
  
   Full jsFiddle here。  
 
I have some jQuery, JavaScript, and CSS that allows me to customize the appearance of HTML form file inputs. I also have a bit of jQuery that allows users to dynamically add as many files as they need to attach.

The problem I'm having is that after a user selects their first file, presses add, and adds the second file, the behavior of the customized input type doesn't apply.

I have a JSFiddle that you can view here:

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

解决方案
That's because they're dynamically appended, you'd need to use event delegation, e.g
$('#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.

                        
这篇关于使用jQuery动态添加自定义HTML表单文件输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！