JQuery - 文件属性

Question

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

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

Answer 1

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

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

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

$("#uploadedfile").on("change", function(){
   var file = this.files[0],
       fileName = file.name,
       fileSize = file.size;
   alert("Uploading: "+fileName+" @ "+fileSize+"bytes");
   CustomFileHandlingFunction(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);
});

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

Answer 2

<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();

我在帖子之前检查了上面的代码,它完美无缺.