从文件输入字段php预览文件

Question

Is it possible to preview the file that is selected in the input field before taking any actions?

ex. I will upload a text file so I will select it then before I click the upload button I want to preview the text file in tables or something like that.

Answer 1

As @RichardTheobald mentioned, it isn't possible with PHP to preview a file before it's uploaded, however, with JavaScript it is.

To read a text file before it's uploaded with JavaScript, you'll need to use a FileReader object. You'll be able to get the list of files from the <input type="file"> element and pop each of these into a FileReader. HTML5Rocks has a good article on reading local files which I've adapted to this question in a JSFiddle.

input.addEventListener("change", function(e) {
    var file = e.target.files[0];

    // Only render plain text files
    if (!file.type === "text/plain")
        return;

    var reader = new FileReader();

    // Once the FileReader loads, pop the result into an output element
    reader.onload = function(event) {
        document.getElementById("output").innerText = event.target.result;
    };

    reader.readAsText(file);
});