Question

我有这个功能来验证通过这个上传的图像文件：

<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

如果它是一个有效的jpeg / jpg文件，那么我在函数中有这个检查器

function validate(pictureId){
    var fileExtension = document.getElementById(pictureId).value.split('.').pop().toLowerCase();
    //etc
}

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

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

Answer 1

您可以尝试使用＆＃34;文件列表＆＃34; 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;

Answer 2

您的代码使用未定义的标识符pictureId。请改用字符串'#temp_picture'。

如果您实际上有var pictureId = '#temp_picture'但忘记将其包含在您发布的代码中，则可能是在用户进行任何选择之前执行代码。它可以在您执行代码时工作，例如在onchange偶数处理程序中。

请注意，返回的名称通常不是文件的真实路径名，但可以是例如C:\fakepath\foo.png。这是一种安全措施，旨在防止页面检查用户计算机的文件系统。这没关系，因为你显然只想看看名字的最后几个字符。

Answer 3

看看我是如何做到的，它考虑了\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);
};

Fiddle Example

Answer 4

你在函数中给出了你的id错误。这是错误信息的主要问题。

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

http://plnkr.co/edit/QlGMSL6xJulxBSPBbB1f?p=preview

Answer 5

write the following function on the click event of button or something you are going to use

function checkvalid()
{
   var file_name = document.getElementById("temp_picture").value;
   var file_extn=file_name.split('.').pop().toLowerCase();
   switch(file_extn) {
        //if .jpg/.gif/.png do something
        case 'jpg': case 'gif': case 'png':

            /* handle */
            break;
        //if .zip/.rar do something else
        case 'zip': case 'rar':
            /* handle */`enter code here`
            break;

        //if .pdf do something else
        case 'pdf':
            /* handle */
            break;
    }   
}

Answer 6

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

检查文件大小和文件类型

<!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>

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

6 个答案: