在上传文件前显示文件的详细信息

show details of the file before file upload

本文关键字：显示文件 详细信息 文件      更新时间：2023-09-26

我想用filename、filesize和一些操作动态填充这个表，比如在用户选择要上传的文件后删除文件，在用户使用jsp、javascript选择文件后以表格格式显示要上传的文件的详细信息。我已经尝试了下面的代码，但我不知道如何获得文件大小和执行删除操作没有上传已经执行。每当用户选择要上传的文件时，在用户提交表单之前，应该生成一个表，显示文件的详细信息，如文件大小、文件路径、文件名等。请在http://jsfiddle.net/s98Tw/4/

中找到类似的场景JSP代码:

 <table border="1"> <tr>
         <td> <input type="file" name="fileUpload" size="50" id="file1" onchange="addFileData(this)" multiple /></td>
            </tr>
           </table>
         <table border="1">
             <tr>
                    <th>SNo</th><th>FileName</th><th>FileSize</th><th>Action</th> </tr>
                    <tr><td><input type="text" name="sno" id="sno"/></td>
                    <td><input type="text" name="fileName" id="fileName"/></td>
                    <td><input type="text" name="fileSize" id="fileSize"/></td>
                        <td><a href="delete">Delete</a></input></td>
            </tr>
             </table>

JavaScript代码:

function addFileData(field){
   var file_name = document.getElementById("file1").value;
    document.getElementById("fileName").value=file_name;
}

看一下Javascript文件类型。你可以通过Web File API获取文件。

document.getElementById("file1").onchange = function() {
    var file = this.files[0];
    document.getElementById("size").innerHTML = file.size + " bytes";
    document.getElementById("name").innerHTML = file.name;
};

以小提琴为例:http://jsfiddle.net/n3zx7/

至于删除——你不能从用户的电脑上删除文件。这是由浏览器安全(以及缺乏删除本地文件的方法)阻止的。

但是，您可以使用特定于浏览器的*fullPath(例如)实现从文件中获取路径。file.mozFullPath或file.webkitFullPath

相关文章：