6

ブラウザのFirefoxとChromeを使用する

入力ファイル要素があります。

<input type='file' id='tempFileInput' multiple></input>

上記のファイル入力ボックス（'tempFileInput'）に3つのファイルを選択したとします。

OnChange 3つのファイルを、ファイルごとに3つの新しいファイル入力ボックスに分割したいと思います。すなわち

<input type='file' id='inputFile_0'></input> 
<input type='file' id='inputFile_1'></input> 
<input type='file' id='inputFile_2'></input>

私はこれを達成するのに苦労しています。何か助けはありますか？

//達成したいことに向けて小さなJavaScriptスニペットを作成しました。

var index = 0;
function multipleInputBoxes(tempFileInput){
   var divForm = document.getElementById('divForm');
   var numOfFiles = tempFileInput.files.length;

   for(var i=0; i<numOfFiles; i++){
      var newUploader = document.createElement('input');
      newUploader.type='file';
      newUploader.id = 'inputFile_' + index;

      var file = tempFileInput.files[i];
      ***newUploader.files[0] = file;***
      //above line does not work, as by default due to security reasons input type='file' is read only, and non editable.

      divForm.appendChild(newUploader);
      index++;
   }
}
4

3 に答える 3

0

inputHTML5 を使用している場合は、1 つのタグで複数のファイルを選択できます。追加のものは必要ありません。

以下の HTML5 を使用します。

<input type='file' id='tempFileInput' multiple='multiple'></input>

アップデート：

あなたが望むことをする方法はありません。このfiles属性は、理由があってのみ準備ができています。ユーザーの同意なしにファイルをアップロードすることを防ぐためです。読み取り専用でない場合は、それをスクリプト化して、ユーザーのコンピューターから任意のファイルをアップロードできますが、これはセキュリティ上の大きな問題です。

于 2012-06-12T05:49:00.690 に答える
0

そのため、単一のファイル入力からファイルにアクセスし、各フォームに個別に保存するのが困難でした。各ファイルにアクセスできるのでvar file = tempFileInput.files[i]、ループを作成し、各ファイルを html の「object」タグに保存し、ファイル オブジェクトを object.value に保存しました。例えば

var numOfFile = tempFileInput.files.length;
for (var int i=0; i<numOfFile; i++){
    //get file object from the filinput element
    var file = tempFileInput.files[i];

    //create new element
    var newObj = document.createElement('object');
        newObj.id = 'obj_' + i;
        newObj.value = file;

    //append object to new form
    createNewForm(newObj);
}

function createNewForm(newObj){
   ...do something here
   ...
   ...
   newForm.appendChild(newObj);
}
于 2012-06-20T02:49:40.180 に答える