javascript - 创建一个通用方法来显示相应项目的附件名称

Question

请查看以下网址

https://codepen.io/Sandipaot123/pen/LLJdeY?editors=1011

我想在相应的显示文本中显示所有附件(多个)的名称，但我必须根据id(#file_input_file1)为每个附件元素编写jquery，并用名称更新相应的文本。如何为此构建通用函数。

$(document).ready(function(){

            var singleAttachmentSize = 3000*1024;
            var totalAttachmentSize = 5000;
            var singleAttachmentSizeInMB = 1;
            var totalAttachmentSizeInMB = 5;
            var totalSelectedAttachmentSize = 0;
            var fileNameList  =[];
            var nametext = "";
            $("#file_input_file1").change(function(){
                var file = this.files;
                for (var i = 0 ; i < file.length ; i++ ) {
                    alert(file[i].size);
                    if(file[i].size > singleAttachmentSize) {
                           alert('The selected attachment size is more than '+singleAttachmentSizeInMB+'MB');
                           fileNameList = [];
                           return false;
                        
                    }
                   fileNameList[i] = file[i].name;
                }
                if(fileNameList.length > 0 ) {
                     for (var i = 0 ; i < file.length ; i++ ) {
                          nametext = nametext + fileNameList[i] + ' , ';
                     }
                }
                fileNameList = [];
                document.getElementById('file_input_text1').value = nametext;
              });   
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="responseForm" action="#" class="right mdl-form mdl-form-registration demo-registration" >
  <div class ="mdl-card mdl-cell mdl-cell--12-col mdl-cell--4-col-tablet mdl-shadow--2dp" >
  <ul class="mdl-list">
    <li class="mdl-list__item">
        <span class="mdl-list__item-secondary-action">
           <label class="mdl-button mdl-js-button mdl-button--colored">
                <i class="material-icons">file_upload</i>
                <input id="file_input_file1" name="replyfiles1" class="none filetype" type="file" multiple/>
            </label>
        </span>
        <div id="file_input_text_div1" class="mdl-textfield mdl-js-textfield textfield-demo">
              <input  class="file_input_text mdl-textfield__input" type="text" readonly  id="file_input_text1" />
              <label class="mdl-textfield__label" for="file_input_text1"></label>
        </div>
    </li>
   
    <li class="mdl-list__item">
       <span class="mdl-list__item-secondary-action">
            <label class="mdl-button mdl-js-button mdl-button--colored">
                <i class="material-icons">file_upload</i>
                <input id="file_input_file2" name="replyfiles2" class="none filetype" type="file" multiple/>
           </label>
        </span>
        <div id="file_input_text_div2" class="mdl-textfield mdl-js-textfield textfield-demo">
            <input class="file_input_text mdl-textfield__input" type="text" readonly  id="file_input_text2" />
           <label class="mdl-textfield__label" for="file_input_text2"></label>
       </div>
    </li>
    
    
    <li class="mdl-list__item">
       <span class="mdl-list__item-secondary-action">
            <label class="mdl-button mdl-js-button mdl-button--colored">
                <i class="material-icons">file_upload</i>
                <input id="file_input_file3" name="replyfiles2" class="none filetype" type="file" multiple/>
           </label>
        </span>
        <div id="file_input_text_div3" class="mdl-textfield mdl-js-textfield textfield-demo">
            <input class="file_input_text mdl-textfield__input" type="text" readonly  id="file_input_text3" />
           <label class="mdl-textfield__label" for="file_input_text3"></label>
       </div>
    </li>
    
    
    <li class="mdl-list__item">
       <span class="mdl-list__item-secondary-action">
            <label class="mdl-button mdl-js-button mdl-button--colored">
                <i class="material-icons">file_upload</i>
                <input id="file_input_file4" name="replyfiles2" class="none filetype" type="file" multiple/>
           </label>
        </span>
        <div id="file_input_text_div4" class="mdl-textfield mdl-js-textfield textfield-demo">
            <input class="file_input_text mdl-textfield__input" type="text" readonly  id="file_input_text4" />
           <label class="mdl-textfield__label" for="file_input_text4"></label>
       </div>
    </li>
    
  </ul>
  </div>
</form>

Answer 1

首先，您需要使用 $(".filetype").change(function(){}) 等类附加函数来更改所有输入的事件。然后，您可以使用 $(this).parents('.mdl-list__item').find('.file_input_text') 获取最接近它们的文本输入并更新其值。

$(document).ready(function(){

            var singleAttachmentSize = 3000*1024;
            var totalAttachmentSize = 5000;
            var singleAttachmentSizeInMB = 1;
            var totalAttachmentSizeInMB = 5;
            var totalSelectedAttachmentSize = 0;

            $(".filetype").change(function(){
                var file = this.files;
                var fileNameList  =[];
                var nametext = "";
                for (var i = 0 ; i < file.length ; i++ ) {
                    alert(file[i].size);
                    if(file[i].size > singleAttachmentSize) {
                           alert('The selected attachment size is more than '+singleAttachmentSizeInMB+'MB');
                           fileNameList = [];
                           return false;
                        
                    }
                   fileNameList[i] = file[i].name;
                }
                if(fileNameList.length > 0 ) {
                     for (var i = 0 ; i < file.length ; i++ ) {
                          nametext = nametext + fileNameList[i] + ' , ';
                     }
                }
                $(this).parents('.mdl-list__item').find('.file_input_text').val(nametext);
              });   
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="responseForm" action="#" class="right mdl-form mdl-form-registration demo-registration" >
  <div class ="mdl-card mdl-cell mdl-cell--12-col mdl-cell--4-col-tablet mdl-shadow--2dp" >
  <ul class="mdl-list">
    <li class="mdl-list__item">
        <span class="mdl-list__item-secondary-action">
           <label class="mdl-button mdl-js-button mdl-button--colored">
                <i class="material-icons">file_upload</i>
                <input id="file_input_file1" name="replyfiles1" class="none filetype" type="file" multiple/>
            </label>
        </span>
        <div id="file_input_text_div1" class="mdl-textfield mdl-js-textfield textfield-demo">
              <input  class="file_input_text mdl-textfield__input" type="text" readonly  id="file_input_text1" />
              <label class="mdl-textfield__label" for="file_input_text1"></label>
        </div>
    </li>
   
    <li class="mdl-list__item">
       <span class="mdl-list__item-secondary-action">
            <label class="mdl-button mdl-js-button mdl-button--colored">
                <i class="material-icons">file_upload</i>
                <input id="file_input_file2" name="replyfiles2" class="none filetype" type="file" multiple/>
           </label>
        </span>
        <div id="file_input_text_div2" class="mdl-textfield mdl-js-textfield textfield-demo">
            <input class="file_input_text mdl-textfield__input" type="text" readonly  id="file_input_text2" />
           <label class="mdl-textfield__label" for="file_input_text2"></label>
       </div>
    </li>
    
    
    <li class="mdl-list__item">
       <span class="mdl-list__item-secondary-action">
            <label class="mdl-button mdl-js-button mdl-button--colored">
                <i class="material-icons">file_upload</i>
                <input id="file_input_file3" name="replyfiles2" class="none filetype" type="file" multiple/>
           </label>
        </span>
        <div id="file_input_text_div3" class="mdl-textfield mdl-js-textfield textfield-demo">
            <input class="file_input_text mdl-textfield__input" type="text" readonly  id="file_input_text3" />
           <label class="mdl-textfield__label" for="file_input_text3"></label>
       </div>
    </li>
    
    
    <li class="mdl-list__item">
       <span class="mdl-list__item-secondary-action">
            <label class="mdl-button mdl-js-button mdl-button--colored">
                <i class="material-icons">file_upload</i>
                <input id="file_input_file4" name="replyfiles2" class="none filetype" type="file" multiple/>
           </label>
        </span>
        <div id="file_input_text_div4" class="mdl-textfield mdl-js-textfield textfield-demo">
            <input class="file_input_text mdl-textfield__input" type="text" readonly  id="file_input_text4" />
           <label class="mdl-textfield__label" for="file_input_text4"></label>
       </div>
    </li>
    
  </ul>
  </div>
</form>