html input上传的文件及后续处理,HTML Input FileUpload files用法及代码示例

HTML DOM中的Input FileUpload files属性用于返回FileList对象，该对象表示使用文件上载按钮选择的一个或多个文件，这是一个只读属性。通过FileList对象，您可以获得有关文件的信息。

用法:

fileuploadObject.files

例子：

Input FileUpload files Property

GeeksforGeeks

DOM Input FileUpload files Property

id="myFile"

multiple size="50"

οnchange="myFunction()">

function myFunction() {

var GFG =

document.getElementById("myFile");

var msg = "";

if ('files' in GFG) {

if (GFG.files.length == 0) {

msg =

"Select multiple files using" +

" 'Shift'.";

} else {

for (var i = 0; i < GFG.files.length; i++) {

msg += "" + (i + 1) +

". file
";

var file = GFG.files[i];

if ('name' in file) {

msg += "name:" + file.name + "
";

}

if ('size' in file) {

msg += "size:" + file.size +

" bytes
";

}

}

}

} else {

if (GFG.value == "") {

msg += "Select multiple" +

" files using 'Shift'.";

} else {

msg += "This file property" +

" is not supported!!";

/* If the browser does not

support the files property,

it will return the path of

the selected file instead. */

msg += "
The path of the " +

"selected file:" + GFG.value;

}

}

document.getElementById("demo").innerHTML = msg;

}

输出：

之前：

后：

支持的浏览器：

谷歌浏览器

Edge

火狐浏览器

Opera

Safari