Question

在页面上有一个指向文件的链接：

<a href="file.doc">File</a>

链接旁边应自动显示扩展名和文件大小。示例：File（DOC，15 KB）

怎么做？

我找到了这个文档：

How to have jQuery restrict file types on upload?

Find size of file behind download link with jQuery

但不知道如何联合他们并展示

UPD 好的，如何知道文件扩展名？

Answer 1

如果您可以提前确定该信息，则可以使用数据属性标记链接，然后通过CSS显示额外内容：选择器和content: attr(data-size)之后等。

如果你不能，我认为链接需要是绝对的文件系统链接，你可以在路径上做一个Ajax HEAD请求来获取内容长度标题，做一些基本的数学运算，并添加相关信息。

Answer 2

HTML5 fie api支持检查文件大小。

上传文件后，您可以使用以下代码检查文件大小。

<强> HTML：

<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>

<强> JavaScript的：

<script>
  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // files is a FileList of File objects. List some properties.
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
      output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
                  f.size, ' bytes, last modified: ',
                  f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
                  '</li>');
    }
    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>

Fiddle

如何知道大小和文件扩展名？

2 个答案: