1つの<input type = file>から別のファイルにHTMLファイルオブジェクトを渡す

Question

ファイルの優先順位を並べ替えることができる形式で複数のファイルアップローダを実装したい（私はドラッグ可能なソート可能なJqueryツール）。

したがって、私のように複数のファイルの入力を追加しました：

<input type = "file" multiple> 

私はいくつかのファイルを選択したときに今、それは3つのファイルが選択されたと言う示しています。 しかし、私は3つのファイルを選択すると、私は3つの部分でファイルのアップローダーを分割したいので、ユーザーがそれに応じて優先順位を設定することができます。 Iは、ファイルリストのオブジェクトの配列を分割し、別の入力に各オブジェクトを割り当てることができないと思っている

$('.files').change(function(e){ 
var filesSelected = e.target.files; 
if(filesSelected.length > 1){ //if user selects multiple files, then automatically split the files into multiple divs so that he/she may do the ordering of files 
    //Here I want to create a list of all the files and implement the draggable and sortable thing. 
} 
}); 

状況は、次のとおりです

は、そのために私は次のコードの種類を使用しています。

希望私は疑いの余地はないと思いますが、そのようなフォーラムに投稿するのは初めてのことなので、ご理解いただけます。

Answer 1

私が受けたポストと簡単な議論から、プログラムでファイル値を設定するとセキュリティ上の脅威になるため、適切な選択肢ではないことが明らかです。私の問題を解決する限り、アップロードされるファイルのファイル名を含む複数のdiv /フィールドを作成し、そのdivのセットにドラッグ・アンド・ドロップ/ソート機能を適用する方法を見つけることをお勧めします。このようにすれば、ユーザはファイルの優先順位を簡単に設定でき、フォームを保存している間は、ファイルデータをデータベースに保存する前に、優先順位を含む配列/フィールドを考慮しなければなりません。

応答者の迅速な対応により、

Answer 2

あなたは、選択したファイルを反復処理し、次にあなたがプログラム的<input type="file">に値を設定することはできません。この

$('.files').change(function(e){ 
var filesSelected = e.target.files; 
if(filesSelected.length > 1){ 
    for(var i=0;i<filesSelected.length;i++) { // We iterate through the selected Files 
     $("#idFromParentElement").append('<div> id=File'+i+'</div'); // Then we create and append the new div to the parent element of our choice 
     var fileId = 'File'+i; 
     $("#fileId").data("file",filesSelected[i]); //After that we include a data into the div with the selected file. 
    } 
} 
}); 

Answer 3

などのファイルからのデータが含まれている動的にjQueryを使ってdiv要素を作成しようとすることができます。これは大きなセキュリティフローになります。あなたのコンピュータから任意のファイルを自動的にアップロードするウェブサイトを想像してみてください。