How to know the size and file extension?

Question

On the page have a link to the file:

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

Next to the link should automatically show the extension and file size. Example: File (DOC, 15 KB)

How to do it?

I found this documentation:

How to have jQuery restrict file types on upload?

Find size of file behind download link with jQuery

but don't know how to unite them and show

UPD okay, how to know the file extension?

How can you access the file from the enviroment where you write your html. Do you have PHP, .NET, JS envoriment? — user237329, Sep 22 '16 at 04:49
@user237329 yes I have... heard that it is possible to do using PHP — TriSTaR, Sep 22 '16 at 04:56
Try this [link](http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_fileupload_files) — KiRa, Sep 22 '16 at 05:11
@KiRa a great example, it is possible to do for link to do this? I in js not BOM-BOM (sorry for my english) — TriSTaR, Sep 22 '16 at 05:14
What do you mean by `it is possible to do for link to do this` ? — KiRa, Sep 22 '16 at 05:16
@KiRa this example shows before downloading a file, and I need to be near the link showed — TriSTaR, Sep 22 '16 at 05:21
You mean after the file uploaded you need to determine the file size?. Correct me if i am wrong. — KiRa, Sep 22 '16 at 05:23
@KiRa no.. I have a link to the doc file, I want to display фаеук to the link that is a doc format — TriSTaR, Sep 22 '16 at 05:27
You mean something like this `http://file.doc/ (file size and file extension?)` — KiRa, Sep 22 '16 at 05:30

score 0 · Answer 1 · answered Sep 22 '16 at 04:50

If you can determine that information ahead of time, you can use data attributes to tag the link and then display the extra content via CSS :after selector and content: attr(data-size), etc.

If you can't, I think the links would need to be absolute file system links and you could do an Ajax HEAD request on the path to grab the content-length header, do some basic math, and add the relevant information.

score 0 · Answer 2 · answered Sep 22 '16 at 05:58

HTML5 fie api supports to check the file size.

You may use the following code to check the file size as soon you upload the file.

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

How to know the size and file extension?

2 Answers2