使用 html 和 jquery 在显示时和上传到服务器之前获取文件名

Posted 2023-05-08

【中文标题】使用 html 和 jquery 在显示时和上传到服务器之前获取文件名

【英文标题】：Get file names while displaying and before uploading on server using html and jquery

【发布时间】：2019-03-07 11:30:06

【问题描述】：

我正在使用 html 标签“输入文件多个 html”选择多个图像，如下所示。

@Html.TextBoxFor(model => model.files, "", 
new @id = "filesToUploadID", @type = "file", @multiple = "multiple" )
<div class="col-md-10" id="selectedFiles"></div>

然后在 javascript 中，我将“onchange”事件侦听器附加到上述标记。当我选择多个图像时，我使用 jquery 将所有附加图像添加到标签中。但我也需要图像文件名。在获取图像文件名时，我的 html 中只填充了一个文件名以及使用 jquery 的图像。 jquery/ javascript 在下面

document.addEventListener("DOMContentLoaded", init, false);
function init() 
    document.querySelector('#filesToUploadID').addEventListener('change', handleFileSelect, false);
    selDiv = document.querySelector("#selectedFiles");


function handleFileSelect(e) 
    debugger;
    NameArray = [];
    if (!e.target.files) return;
    selDiv.innerHTML = "";
    var files = e.target.files;
    for (var i = 0; i < files.length; i++) 
        var f = files[i];
        NameArray.push(f.name);
        var reader = new FileReader();
        reader.onload = function (e) 
            var html = "<img src='" + e.target.result + "' />";// + "<div>" +  + "</div>";//+ "<br clear=\"left\"/>";
            $(selDiv).append($(html));
            //selDiv.innerHTML += html;
        
        reader.readAsDataURL(f);
    

我从这个link 获得帮助并实现了两种方式，但未能成功。

所有图像名称都与图像相关。我得到的是这样的 它的源代码是

我必须根据图像名称分配 id，这就是为什么获取相关图像名称很重要。任何导致该主题的线索都将受到高度赞赏。

谢谢。

【问题讨论】：

您的代码没有显示任何名称的输出...？

@Stuart，我的实际行如下 var html = "" + "" + f.name + "";

【参考方案1】：

var f = 文件[i]; var fileName = e.target.f.name