Javascript 如何从输入类型=文件值检索文件名

我有此功能用于验证通过以下方式上载的图像文件：

<input accept="image/*" type="file" name="temp_picture" id="temp_picture">
//onchange
validate($(this).attr('name')); //I had to use the attribute name in some other function

问题是，我无法从值中获取图像文件名。下面的代码返回一个空字符串：

console.log(document.getElementById(pictureId).value);

您可以尝试使用“文件列表”api，如下所示：

var file = document.getElementById( 'temp_picture' ).files[0];
alert(file.name);

https://developer.mozilla.org/en-US/docs/Web/API/FileList


HTML
----
    <form id='bob'>
        <input accept="image/*" type="file" name="temp_picture" id="temp_picture" multiple>
        <div id='output'></div>
    </form>


Javascript
----------
        function getvalues(){

            var output=document.getElementById('output');
            var input=document.getElementById('temp_picture');

            input.onchange=function(e){
                var files=input.files;
                for( var i=0; i < files.length; i++ ) {
                    createNode( 'pre',{ innerHTML:'Name='+files[i].name+'<br />Size='+files[i].size+'<br />Type='+files[i].type, style:'margin:3em' }, output );
                }
            }
        }
/*
There is a function here called 'createNode' - basically it uses document.createElement but also adds attributes to newly generated nodes. I have not included it for reasons of brevity.
*/

 window.onload=getvalues;

var file=document.getElementById（'temp_picture'）.files[0]；
警报（文件名）；
https://developer.mozilla.org/en-US/docs/Web/API/FileList
HTML
----
Javascript
----------
函数getvalues（）{
var output=document.getElementById（'output'）；
var input=document.getElementById（'temp_picture'）；
input.onchange=函数（e）{
var files=input.files；
对于（var i=0；iSize='+文件[i]。Size+'
Type='+文件[i]。类型，样式：'margin:3em'，输出）；
}
}
}
/*
这里有一个名为“createNode”的函数，它基本上使用document.createElement，但也向新生成的节点添加属性。为了简洁起见，我没有把它包括在内。
*/
window.onload=getvalues；

您可以尝试使用“文件列表”api，如下所示：

var file = document.getElementById( 'temp_picture' ).files[0];
alert(file.name);

https://developer.mozilla.org/en-US/docs/Web/API/FileList


HTML
----
    <form id='bob'>
        <input accept="image/*" type="file" name="temp_picture" id="temp_picture" multiple>
        <div id='output'></div>
    </form>


Javascript
----------
        function getvalues(){

            var output=document.getElementById('output');
            var input=document.getElementById('temp_picture');

            input.onchange=function(e){
                var files=input.files;
                for( var i=0; i < files.length; i++ ) {
                    createNode( 'pre',{ innerHTML:'Name='+files[i].name+'<br />Size='+files[i].size+'<br />Type='+files[i].type, style:'margin:3em' }, output );
                }
            }
        }
/*
There is a function here called 'createNode' - basically it uses document.createElement but also adds attributes to newly generated nodes. I have not included it for reasons of brevity.
*/

 window.onload=getvalues;

var file=document.getElementById（'temp_picture'）.files[0]；
警报（文件名）；
https://developer.mozilla.org/en-US/docs/Web/API/FileList
HTML
----
Javascript
----------
函数getvalues（）{
var output=document.getElementById（'output'）；
var input=document.getElementById（'temp_picture'）；
input.onchange=函数（e）{
var files=input.files；
对于（var i=0；iSize='+文件[i]。Size+'
Type='+文件[i]。类型，样式：'margin:3em'，输出）；
}
}
}
/*
这里有一个名为“createNode”的函数，它基本上使用document.createElement，但也向新生成的节点添加属性。为了简洁起见，我没有把它包括在内。
*/
window.onload=getvalues；

您的代码使用未定义的标识符

pictureId

。使用字符串

“#temp_picture”

如果您确实有

var pictureId='#temp_picture'

但忘记将其包含在您发布的代码中，那么很可能是在用户做出任何选择之前执行了代码。如果您在

onchange

偶数处理程序中执行代码，则它会起作用

---

请注意，返回的名称通常不是文件的真实路径名，但可以是例如

C:\fakepath\foo.png

。这是一种安全措施，旨在防止页面检查用户计算机的文件系统。这里没有关系，因为您显然只想查看名称的最后几个字符。

您的代码使用未定义的标识符

pictureId

。使用字符串

“#temp_picture”

如果您确实有

var pictureId='#temp_picture'

但忘记将其包含在您发布的代码中，那么很可能是在用户做出任何选择之前执行了代码。如果您在

onchange

偶数处理程序中执行代码，则它会起作用

---

请注意，返回的名称通常不是文件的真实路径名，但可以是例如

C:\fakepath\foo.png

。这是一种安全措施，旨在防止页面检查用户计算机的文件系统。这里没关系，因为您显然只想查看名称的最后几个字符。

看看我是如何做到的，它考虑了

\fakepath\

，它还获取扩展名和文件名：

document.getElementById("temp_picture").onchange=function(){
  var removeFakePath = this.value.split("\\"); // For the browser that add a fake path
  var getFileWithExt = removeFakePath[removeFakePath.length - 1];
  var splitExtension = getFileWithExt.split(".");
  var filename = splitExtension[0];
  var extension = splitExtension[1];
    alert("Filename:" + filename + "\n\rExtension:" + extension);
};

---

看看我是怎么做的，它考虑了

\fakepath\

，它还获取扩展名和文件名：

document.getElementById("temp_picture").onchange=function(){
  var removeFakePath = this.value.split("\\"); // For the browser that add a fake path
  var getFileWithExt = removeFakePath[removeFakePath.length - 1];
  var splitExtension = getFileWithExt.split(".");
  var filename = splitExtension[0];
  var extension = splitExtension[1];
    alert("Filename:" + filename + "\n\rExtension:" + extension);
};

---

您在函数中输入的id错误。这是错误消息的主要问题

我附上一个演示在这里满足您的要求。做检查

---

您在函数中输入的id错误。这是错误消息的主要问题

我附上一个演示在这里满足您的要求。做检查

---

查看以下代码以获取帮助：

它检查文件大小和文件类型

<!DOCTYPE html>
<html>
<body>
<input type="file" name="image_file" id="image_file" onchange="fileSelected();">`
`<script>
var iMaxFilesize = 1048576; // 1MB
function fileSelected()
{
// get selected file element
var oFile = document.getElementById('image_file').files[0];
// filter for image files
var rFilter = /^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i;
if (! rFilter.test(oFile.type)) {
    alert("Not a proper file format");
    return;
}
// little test for filesize
if (oFile.size > iMaxFilesize) {
    alert("File size exceeded");
    return;
}
alert("success = "+oFile.name);
}
</script>
</body>
</html>

`
`
var iMaxFilesize=1048576；//1MB
函数fileSelected（）
{
//获取选定的文件元素
var of ile=document.getElementById（'image_file'）.files[0]；
//图像文件的过滤器
var rFilter=/^（image\/bmp | image\/gif | image\/jpeg | image\/png | image\/tiff）$/i；
if（！rFilter.test（文件类型））{
警报（“文件格式不正确”）；
回来
}
//对文件大小的小测试
if（oFile.size>iMaxFilesize）{
警报（“超出文件大小”）；
回来
}
警报（“success=“+oFile.name”）；
}

查看以下代码以获取帮助：

它检查文件大小和文件类型

<!DOCTYPE html>
<html>
<body>
<input type="file" name="image_file" id="image_file" onchange="fileSelected();">`
`<script>
var iMaxFilesize = 1048576; // 1MB
function fileSelected()
{
// get selected file element
var oFile = document.getElementById('image_file').files[0];
// filter for image files
var rFilter = /^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i;
if (! rFilter.test(oFile.type)) {
    alert("Not a proper file format");
    return;
}
// little test for filesize
if (oFile.size > iMaxFilesize) {
    alert("File size exceeded");
    return;
}
alert("success = "+oFile.name);
}
</script>
</body>
</html>

`
`
var iMaxFilesize=1048576；//1MB
函数fileSelected（）
{
//获取选定的文件元素
var of ile=document.getElementById（'image_file'）.files[0]；
//图像文件的过滤器
var rFilter=/^（image\/bmp | image\/gif | image\/jpeg | image\/png | image\/tiff）$/i；
if（！rFilter.test（文件类型））{
警报（“文件格式不正确”）；
回来
}
//对文件大小的小测试
if（oFile.size>iMaxFilesize）{
警报（“超出文件大小”）；
回来
}
警报（“success=“+oFile.name”）；
}

//获取文件名，可能带有路径（取决于浏览器）var filename=$（“#temp_picture”）.val（）；//使用正则表达式修剪最终点变量extension=filename.replace（/^.*\./，''）之前的所有内容；它返回一个空字符串$（“#temp_picture”）；[]$（'temp#u picture'）.val（）；“我想我已经解决了这个问题。调用函数validate（）时，输入[type=image]还没有值