1つの入力タグから複数のファイルを追加/アップロード/選択する方法は？

複数のファイルを追加/アップロード/複数のファイルを選択する方法は複数ありますが、前の選択をすべて選択した後は削除または上書きされました。私が欲しいものはです。1つの入力タグから複数のファイルを追加/アップロード/選択する方法は？

複数ファイルの選択。（プレビューを行います、これは完了です）。
ユーザーはプレビューから選択項目を削除できます。
あなたが入力[タイプ=ファイル]を非表示にし、新しいファイルを選択して、個別にファイルのリストを管理するために、入力と対話するUIを提供することができ、現在の選択に

出典

2017-04-11 AWE

を複数のファイル/画像を追加します。

は、だからあなたがすることができます：

1）は、隠し入力<input id="myInput" type="file" multiple style="display:none" />

2）プロンプト

を開くためにmyInput.click（）を呼び出すボタンで格好良いUIの提供を追加します

3）変更イベントを入力してmyInput.filesを取得し、配列またはコレクションに格納する

4）AJAX経由ですべてのファイルをアップロードするには、FormDataを作成してすべてのファイルを追加してから、FormDataインスタンスをajaxに渡しますコール（例えば：$ ajax（{... data：formData ...}））。

EDITED：

Plnkr link

サンプル行動：リストに新しいファイルを追加します "+ファイルの追加" ボタンを押すと

。

<!DOCTYPE html> 
<html> 

    <head> 
    <meta charset="utf-8" /> 
    <title></title> 
    <link rel="stylesheet" href="style.css" /> 
    <script data-require="jquery" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="script.js"></script> 
    </head> 

    <body> 
    <input id="myInput" type="file" multiple style="display:none" /> 

    <button id="myButton" type="button" style="border-radius: 5px; background-color: #fff; color: green;">+ Add Files</button> 
    <button id="mySubmitButton" type="button" style="border-radius: 5px; background-color: #fff; color: green;">Send Files</button> 

    <div id="myFiles"></div> 
    </body> 

</html>

サンプルスクリプト：ファイルのボタンは、対応するURLへ

サンプルHTMLをファイルを送信する「ファイルの送信」を押す

を削除します、リスト内のファイルをクリック

$(function(){ 
    let inputFile = $('#myInput'); 
    let button = $('#myButton'); 
    let buttonSubmit = $('#mySubmitButton'); 
    let filesContainer = $('#myFiles'); 
    let files = []; 

    inputFile.change(function() { 
    let newFiles = []; 
    for(let index = 0; index < inputFile[0].files.length; index++) { 
     let file = inputFile[0].files[index]; 
     newFiles.push(file); 
     files.push(file); 
    } 

    newFiles.forEach(file => { 
     let fileElement = $(`<p>${file.name}</p>`); 
     fileElement.data('fileData', file); 
     filesContainer.append(fileElement); 

     fileElement.click(function(event) { 
     let fileElement = $(event.target); 
     let indexToRemove = files.indexOf(fileElement.data('fileData')); 
     fileElement.remove(); 
     files.splice(indexToRemove, 1); 
     }); 
    }); 
    }); 

    button.click(function() { 
    inputFile.click(); 
    }); 

    buttonSubmit.click(function() { 
    let formData = new FormData(); 

    files.forEach(file => { 
     formData.append('file', file); 
    }); 

    console.log('Sending...'); 

    $.ajax({ 
     url: 'https://this_is_the_url_to_upload_to', 
     data: formData, 
     type: 'POST', 
     success: function(data) { console.log('SUCCESS !!!'); }, 
     error: function(data) { console.log('ERROR !!!'); }, 
     cache: false, 
     processData: false, 
     contentType: false 
    }); 
    }); 
});

出典

2017-04-11 15:22:17 andreim

3）変更イベントを入力してmyInput.filesを取得し、配列またはコレクションに格納しますか？私はそれが心配です。どのように我々は配列のファイルの参照を格納することができますか？ 4）AJAX経由ですべてのファイルをアップロードするには、FormDataを作成してすべてのファイルを追加し、FormDataインスタンスをajax呼び出しに渡します。 – AWE

varの代わりにletは何ですか？ – AWE

この件名をよく説明する[この回答]（http://stackoverflow.com/questions/762011/whats-the-difference-between-using-let-and-var-to-declare-a-variable）を確認してください。また、varの代わりにconstとletを使用することを検討してください。 – andreim

1つの入力タグから複数のファイルを追加/アップロード/選択する方法は？

答えて

関連する問題