MVC 如何将这个 JavaScript 从单个 getElementById 转换为 type= "file"

Question

所以我有这个JS，它工作得很好，但是是否可以将其从getElementById 'studentPhoto'更改为输入类型="文件"？

因为我有很多

<input type="file" id="studentPhoto">
<input type="file" id="studentPhoto">

基本上我想做的是下面的JS将适用于每个学生PhotoId

  document.getElementById('studentPhoto').addEventListener('change', checkFile, false);
         function checkFile(e) {
             var file_list = e.target.files;
             for (var i = 0, file; file = file_list[i]; i++) {
                 var sFileName = file.name;
                 var sFileExtension = sFileName.split('.')[sFileName.split('.').length - 1].toLowerCase();
                 var iFileSize = file.size;
                 var iConvert = (file.size / 10485760).toFixed(2);
                 if (!(sFileExtension === "pdf" || sFileExtension === "doc" || sFileExtension === "docx") || iFileSize > 10485760) {
                     txt = "File type : " + sFileExtension + "nn";
                     txt += "Size: " + iConvert + " MB nn";
                     txt += "Please make sure your file is in pdf or doc format and less than 10 MB.nn";
                     alert(txt);
                 }
             }
         }

谢谢

Answer 1

你可以切换到 JQuery 选择器。下面适用于我的一个具有 2 个文件输入的项目。

function checkFile(e) {
    var file_list = e;
    for (var i = 0; i <= file_list.length; i++) {
       //Do stuff here
    }
}
$("input[type='file']").change(function () {
    checkFile(document.getElementById($(this).attr("id")).files);
});

希望有帮助

Answer 2

更改：

document.getElementById('studentPhoto')

自：

$("input['type=file']")

此外，您不应在多个元素上使用相同的id，而应使用 class 。要按class选择元素：

<input type="file" class="studentPhoto"> <input type="file" class="studentPhoto">

$('.studentPhoto')