追加と削除添付ファイルは

Question

URLの下を見てください1。アップロードボタンをクリックするたびに1行ずつ追加して削除するにはどうしたらいいですか？

var fileInputTextDiv = document.getElementById('file_input_text_div'); 
 
var fileInput = document.getElementById('file_input_file'); 
 
var fileInputText = document.getElementById('file_input_text'); 
 

 
fileInput.addEventListener('change', changeInputText); 
 

 
function changeInputText() { 
 
    var str = fileInput.value; 
 
    var i; 
 
    if (str.lastIndexOf('\\')) { 
 
    i = str.lastIndexOf('\\') + 1; 
 
    } else if (str.lastIndexOf('/')) { 
 
    i = str.lastIndexOf('/') + 1; 
 
    } 
 
    fileInputText.value = str.slice(i, str.length); 
 
} 
 

 
$(document).ready(function() { 
 
    $("#clear").click(function() { 
 
    $("#file_input_file").val(""); 
 
    var fileInputText = document.getElementById('file_input_text'); 
 
    fileInputText.value = ""; 
 

 
    }); 
 
});

body { 
 
    display: flex; 
 
} 
 

 
.file_input_div { 
 
    margin: auto; 
 
    width: 250px; 
 
    height: 40px; 
 
} 
 

 
.file_input { 
 
    float: left; 
 
} 
 

 
#file_input_text_div { 
 
    width: 200px; 
 
    margin-top: -8px; 
 
    margin-left: 5px; 
 
} 
 

 
.none { 
 
    display: none; 
 
} 
 

 
.content-grid { 
 
    max-width: 550; 
 
    height: auto; 
 
    margin: auto; 
 
    padding: 2px; 
 
} 
 

 
.mdl-cell { 
 
    margin: 2; 
 
} 
 

 
.mdl-list { 
 
    padding: 1px 3px; 
 
} 
 

 
.mdl-list__item { 
 
    padding: 3px; 
 
} 
 

 
body { 
 
    padding-top: 20px; 
 
    padding-left: 20px; 
 
    box-sizing: border-box; 
 
} 
 

 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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_file" class="none" type="file" /> 
 
       </label> 
 
      </span> 
 
     <div id="file_input_text_div" class="mdl-textfield mdl-js-textfield textfield-demo"> 
 
     <input class="file_input_text mdl-textfield__input" type="text" disabled readonly id="file_input_text" /> 
 
     <label class="mdl-textfield__label" for="file_input_text"></label> 
 
     <button id="clear">Clear</button> 
 
     </div> 
 
    </li> 
 

 
    </ul> 
 
</div>

Answer 1

私はあなたが、たとえば、入力の "ファイル" プロパティを使用してプレイする必要があることを推測：

var filesToUpload = []; 
$("file_input_file").change(function(){ 
    let files = this.files; 
    filesToUpload.push(files); 
}); 

あなたはFileLists hereに関する詳細な情報を見つけることができます。私は、入力から直接送信するのではなく、これらのファイルをサーバに間接的にカスタム配列（上記のようにfilesToUpload）から送信することが可能かどうか不思議です。はいの場合、問題は解決されます。その後、filesToUploadの内容に基づいてビューを変更することができます。