Question

好吧，我已经尝试在页面.html中上传文件，但我想做一些更改，首先当我附加文件时，文档名称必须出现在<p>Name of the Document: </p>上且大小必须出现在<p>Size of Document:</p>上，这是一张图片来说明我的例子：

有人知道如何做到这一点吗？

Answer 1

您可以使用输入FileUpload对象的files属性来执行此操作。这是一个多文件上传示例。如果您需要上传单个文件，只需删除multiple元素的<input>属性。

HTML5代码：

<html>
    <body onLoad="showinfo()">
        <input type="file" id="upfiles" size="64" onchange="showinfo()" multiple>
        <br>
        <div id="fileinfo"></div>
    </body>
</html>

<强>使用Javascript：

<script type="text/javascript">
var showinfo = function(){
    var up = document.getElementById("upfiles");
    var info = "";

    if (up.files) {
        var upf = up.files;
        if (upf.length) {
            for (var i = 0; i<upf.length; i++) {
                var file = upf[i];
                info += "<p>"
                info += "<b>" + (i+1) + ". File Name: </b>";
                info += (file.name) ? file.name + "<br>" : "N/A";
                info += "<b>" + (i+1) + ". File Size: </b>";
                info += (file.size) ? file.size + " bytes<br>" : "";
                info += "</p>";
            }
        } else {
            info = "Select files to be uploaded.";
        }
    } 
    else {
        info = "Your browser does not support Input FileUpload object.";
        // You may add fallback function here.
    }
    document.getElementById("fileinfo").innerHTML = info;
};
</script>

如何自定义属性（输入类型=“文件”）HTML5？

1 个答案: