正在使用getElementByClassName上载文件

Uploading file using getElementByClassName

本文关键字：上载 文件 getElementByClassName      更新时间：2023-09-26

我有如下所示的代码。我正在尝试上传多个文件onchamge，

document.getElementsByClassName('fileUpload').onchange = function () {
    alert("changed");
   /* var field = document.getElementsByClassName('fileUpload');
    var file = field[0].files[0];*/
    var filename = this.value;
    alert(filename);
    var a = filename.split(".");
    alert(a);
    if( a.length === 1 || ( a[0] === "" && a.length === 2 ) ) {
        return "";
    }
    var suffix = a.pop().toLowerCase();
    //if( suffix != 'jpg' && suffix != 'jpeg' && suffix != 'png' && suffix != 'pdf' && suffix != 'doc'){
    if (!(suffix in {jpg:'', jpeg:'', png:'', pdf:'', doc:''})){
        document.getElementById('fileUpload').value = "";
        alert('Please select an correct file.');
    }
};
<input type="file" name="image" id="fileUpload">
<input type="file" name="image" class="fileUpload">
<input type="file" name="image" class="fileUpload">

但由于ID仅设置为一个元素，我正试图将代码更改为使用getElementByClassName。请帮我修改代码以使其正常工作，谢谢。

您需要创建一个共享的onchange函数，然后将其应用于每个元素：

// Iterate over each element with the fileUpload class and assign the handler
[].forEach.call(document.getElementsByClassName('fileUpload'), function(element) {
  element.onchange = onFileChanged;
});
// Shared handler for the event
function onFileChanged() {
  alert("changed");
  var field = this; // 'this' is the current file element
  var file = field.files[0];
  var filename = this.value;
  alert(filename);
  var a = filename.split(".");
  alert(a);
  if( a.length === 1 || ( a[0] === "" && a.length === 2 ) ) {
    return "";
  }
  var suffix = a.pop().toLowerCase();
  //if( suffix != 'jpg' && suffix != 'jpeg' && suffix != 'png' && suffix != 'pdf' && suffix != 'doc'){
  if (!(suffix in {jpg:'', jpeg:'', png:'', pdf:'', doc:''})){
    field.value = "";
    alert('Please select an correct file.');
  }
};
<input type="file" name="image" id="fileUpload">
<input type="file" name="image" class="fileUpload">
<input type="file" name="image" class="fileUpload">

此

getElementsByClassName('fileUpload')

返回一个项数组，而不是单个项。只需循环通过即可：

var array = getElementsByClassName('fileUpload');
for (var i=0;i<array.length;i++) {
  array[i].onchange = ...
}

<!DOCTYPE html>
<html>
<body onload="myFunction()">
<input type="file" id="myFile" multiple size="50" onchange="myFunction()">
<p id="demo"></p>
<script>
function myFunction(){
    var x = document.getElementById("myFile");
    var 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++) {
                txt += "<br><strong>" + (i+1) + ". file</strong><br>";
                var file = x.files[i];
                if ('name' in file) {
                    txt += "name: " + file.name + "<br>";
                }
                if ('size' in file) {
                    txt += "size: " + file.size + " bytes <br>";
                }
            }
        }
    } 
    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; // If the browser does not support the files property, it will return the path of the selected file instead. 
        }
    }
    document.getElementById("demo").innerHTML = txt;
}
</script>
<p><strong>Tip:</strong> Use the Control or the Shift key to select multiple files.</p>
</body>
</html>

给，祝你好运，对我有用，谢谢你。

相关文章：