Question

<input type="file">のファイルを取得できません。

以下のコードでは、UIダイアログを作成し、2つの入力を持っています。そのうちの1つはテキストで、もう1つはファイルの入力/アップロードです。

テキスト値を取得できますが、ファイル入力を取得できません。

var $container = $(document.body); 
var j = '<div class="form-group fileupload">' 
     +  '<label>' + ' Döküman Adı Girin :' + '</label>' 
     +  '<input type="text" id="mediatitle" placeholder="Döküman Adı" class="form-control"></br>' 
     +  '<label>' + 'File Yükle' + '</label>' 
     +  '<input id="FileUpload" type="file"/>' 
     + '</div>', 
    k = '<button href="#" class="btn btn-primary linkUpload" >' +'Yükle' + "</button>"; 

this.$dialog = ui.dialog({ 
    title: 'Döküman Yükle', 
    body: j, 
    footer: k 
}).render().appendTo($container); 

ボタンがクリックされたとき、私は入力の値を取得しよう：

var formData = new FormData(); 
var fileName = $("#mediatitle").val(); 
var totalFiles = $("#FileUpload").files.length; 

for (var i = 0; i < totalFiles; i++) { 
    var file = document.getElementById("FileUpload").files[i]; 
    formData.append("FileUpload", file); 
} 

totalfiles 0を返します。

私はこの問題を解決することができますか？前もって感謝します。

Answer 1

var totalFiles = document.getElementById("FileUpload").files.length; 

$("#FileUpload")はファイル入力ではありません。これは、ファイル入力を含むjQueryコレクションです。 jQueryコレクションにはfile属性がありません。未処理のDOMノードが行います。少しクリーンアップで

：

var formData = new FormData(); 
var fileName = $("#mediatitle").val(); 
var fileInput = document.getElementById("FileUpload"); 
var totalFiles = fileInput.files.length; 

for (var i = 0; i < totalFiles; i++) { 
    var file = fileInput.files[i]; 
    formData.append("FileUpload", file); 
}