Question

我需要更改此代码，以便条件从多选文件输入中检查所有选定文件的文件扩展名，此代码仅检查一个。我能做到这一点吗？

var file = document.getElementById('file');
var ext = file.value.substring(file.value.lastIndexOf('.') + 1);

     if(ext!== "mp4" && ext!== "m4v" && ext!== "f4v")  {
         alert('not an accepted file extension');
             return false;
} 

<input id="file" name="uploaded[]" type="file" multiple />

Answer 1

注意我只是为了得到字符串的最后三个字符而烦恼，因为你只有三个字母的文件扩展名。如果你想要，你可以使用.split（'。'）获取一个段数组并选择该数组的最后一个元素。

var selection = document.getElementById('file');
for (var i=0; i<selection.files.length; i++) {
    var ext = selection.files[i].name.substr(-3);
    if(ext!== "mp4" && ext!== "m4v" && ext!== "fv4")  {
        alert('not an accepted file extension');
        return false;
    }
}

Answer 2

要获取dom元素数组中的所有输入元素，请使用document.getElementsByName('uploaded[]')。

例如，在您的情况下，它将类似于：

var files = document.getElementsByName('uploaded[]'); 
for (var i = 0, j = files.length; i < j; i++) {
    var file = files[i];
    // do stuff with your file
}

Answer 3

  <input name="" id="yourinputfieldis"  onchange="checkFile()"  type="file" multiple = "multiple" accept = "*">    

  <script>
        function checkFile() {   
        var x =  document.getElementById("yourinputfieldis");
        var txt = "";
        document.getElementById("demo").innerHTML = txt;
        if ('files' in x) {
        if (x.files.length == 0) {
        txt = "Select one or more files.";
        } else {
        for (var i = 0; i < x.files.length; i++) {      

        var file = x.files[i];
        if ('name' in file) {

        var ext = file.name.split('.').pop().toLowerCase();
        if($.inArray(ext, ['gif','png','jpg','jpeg','doc','pdf','xlsx']) == -1) {
        txt += "name: " + file.name + "<br>";
        document.getElementById("yourinputfieldis").value = "";

        if ('size' in file) {
        txt += "size: " + file.size + " bytes <br>";
        }
        alert('You are trying to upload files which not allowed ' + "(" + file.name + " is invalid)");

        }

        }
        }
        }
        }
        else {
        if (x.value == "") {
        txt += "Select one or more files.";
        } else {
        txt += "The files property is not supported by your browser!";
        txt  += "<br>The path of the selected file: " + x.value; 
        }
        }     
        }
   </script>

Answer 4

使用此方法来验证aspx页面中的文件类型，

<asp:FileUpload ID="fupload" name="fupload" runat="server" Class="form-control multi" accept="doc|docx|pdf|xls|xlsx" Width="270px" />

我已经使用“ MultiFile.js”插件选择了多个文件并上传。

Answer 5

通过javascript some()方法进行多个文件验证。

function isVideo(film) {
  const ext = ['.mp4', '.m4v', '.fv4'];
  return ext.some(el => film.endsWith(el));
}

function fileValidation() {
  let files = document.getElementById('file');
  for (let i = 0; i < files.files.length; ++i) {
    let fname = files.files.item(i).name;
    if (!isVideo(fname)) {
      alert("File extension not supported!");
      return false;
    }
  }
}

<input id="file" name="uploaded[]" type="file" multiple onchange="fileValidation()" />

检查多个上传文件输入中的所有扩展名

5 个答案: