JQuery - 文件属性

时间:2011-12-08 19:12:14

标签: jquery file attr

尝试在选择文件后从输入字段访问文件属性。 试过这个,但得到错误'文件未定义'

var file = $("#uploadedfile").prop("files")[0];
var fileName = file.fileName;
var fileSize = file.fileSize;
alert("Uploading: "+fileName+" @ "+fileSize+"bytes");

5 个答案:

答案 0 :(得分:42)

如果#uploadedfile是类型为“file”的输入:

var file = $("#uploadedfile")[0].files[0];
var fileName = file.name;
var fileSize = file.size;
alert("Uploading: "+fileName+" @ "+fileSize+"bytes");

通常这会触发更改事件,如下所示:

$("#uploadedfile").on("change", function(){
   var file = this.files[0],
       fileName = file.name,
       fileSize = file.size;
   alert("Uploading: "+fileName+" @ "+fileSize+"bytes");
   CustomFileHandlingFunction(file);
});
编辑:Kevin在关于files属性的评论中是正确的,已编辑!

再次编辑:正确的语法不是

filename = this.files[0].filename;

但是

filename = this.files[0].name;
filesize = this.files[0].size;

添加应该跨浏览器工作的小提琴:http://jsfiddle.net/eq3Qv/

答案 1 :(得分:7)

<form id = "uploadForm" name = "uploadForm" enctype="multipart/form-data">
    <label for="uploadFile">Upload Your File</label>
     <input type="file" name="uploadFile" id="uploadFile">                  
</form>
<script>
    $('#uploadFile').change(function(){
        var fileName = this.files[0].name;
        var fileSize = this.files[0].size;
        var fileType = this.files[0].type;
        alert('FileName : ' + fileName + '\nFileSize : ' + fileSize + ' bytes');
    });
</script>

注意: 要获取上传文件名,则使用jquery val()方法。

对于Ex:

var fileName = $('#uploadFile').val();

我在发布之前检查了上面的代码,它完美无缺。!

答案 2 :(得分:2)

要获取文件名,请使用:

var files = document.getElementById('inputElementID').files;

使用jQuery(因为你已经是),你可以将其改编为以下内容:

$('input[type="file"][multiple]').change(
    function(e){
        var files = this.files;
        for (i=0;i<files.length;i++){
            console.log(files[i].fileName + ' (' + files[i].fileSize + ').');
        }
        return false;
    });

JS Fiddle demo

答案 3 :(得分:1)

试试

var file = $("#uploadedfile").prop("files")[0];
var fileName = file.name;
var fileSize = file.size;
alert("Uploading: "+fileName+" @ "+fileSize+"bytes");

它对我有用

答案 4 :(得分:0)

input.files属性是HTML5功能。这就是为什么有些浏览器不会返回任何东西。 如果input.value不存在,只需将简历添加到普通旧files(字符串)。

参考:http://www.w3.org/TR/2012/WD-html5-20121025/common-input-element-apis.html#dom-input-files