Question

<input type="file">의 파일을 가져올 수 없습니다.

아래 코드에서 UI 대화 상자를 만들고 두 개의 입력을가집니다. 그 중 하나는 텍스트이고 다른 하나는 파일 입력/업로드입니다.

텍스트 값을 가져올 수는 있지만 파일 입력을 가져올 수 없습니다. 버튼을 클릭하면

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); 

, I는 입력의 값을 얻을려고 :

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); 
}