JQuery - 文件属性

Question

JQuery - 文件属性

22

尝试在选择文件后从输入字段访问文件属性。尝试了这个方法，但出现错误“未定义文件”。

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

- JimmyJammed

你尝试更改属性的属性了吗？ - Ricardo Binns

1

你有进行过任何调试吗？错误提示表明$("#uploadedfile").prop("files")[0];存在问题。 - maxedison

你的浏览器支持访问吗？ - Daniel A. White

尝试使用attr，结果相同
我得到的唯一错误消息是“文件未定义”
我正在使用Mac Firefox 8.0.1，那么我如何检查它是否支持访问？

- JimmyJammed

5个回答

8

<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()方法。

例如:

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

在发布之前，我检查了上面的代码，它完美地工作着！

- Srinivasan.S

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.

- David Thomas

这在Chrome中运行得很好，但在Firefox中我得到了undefined（未定义），这只是一个浏览器支持的问题。 - Kevin B

1

只是尝试

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

它对我有效

- Suraj Poddar

0

input.files 属性是 HTML5 的一个特性。这就是为什么一些浏览器没有返回任何内容的原因。如果 files 不存在，只需添加回退到普通的 input.value（字符串）即可。

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

- Fredrik Blomqvist

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- adeneo · Accepted Answer

如果#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);
});

FIDDLE