javascript - 获取输入文件值并制作图像

Question

我试图从 html 中的文件输入中获取值并将其立即放入我的 div 中，如下所示:

HTML:

    <div class='pushLeft noOverflow' id='areaUpload'>
        <input type='file' id='uploadFileHere' />
    </div>

jQuery:

    $(document).on("change", "#uploadFileHere", function(){
        $("#areaUpload").html("<img src='" + $("#uploadFileHere").val() + "' />");

    });

我遇到的问题是图像没有出现。我检查了文件路径，它返回:C:\fakepath\filenamehere.jpg

那么我该如何解决这个问题呢？

Answer 1

您可以使用FileReader为此，试试这个。

$(document).on("change", "#uploadFileHere", function(){
      var fileInput = this;
      if (fileInput.files && fileInput.files[0]) {
            var fileReader = new FileReader();

            fileReader.onload = function (e) {
               $("#areaUpload").html("<img src='" +e.target.result + "' />");
            }

            fileReader.readAsDataURL(fileInput.files[0]);
        }
});

检查这个 DEMO

感谢 @FabrícioMatté，为此 JsFiddle 演示

应注意，较旧的浏览器(IE < 10)不支持此 API