0

我正在尝试从 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

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

4

3 回答 3

3

您需要将文件上传到服务器并将其保存在网站内的服务器目录中。然后给出图像标签的相对或绝对路径。

于 2012-11-10T18:33:25.190 回答
3

你可以使用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]);
        }
});

检查此演示

感谢@FabrícioMatté，对于这个 JsFiddle 演示

应该注意旧的浏览器（IE < 10）不支持这个API

于 2012-11-10T18:40:37.603 回答
1

先生，我认为您应该首先使用一些 ajax 的东西（例如表单的 POST 操作）并将图像上传到服务器上，然后从服务器获取实际的 URL 并将其放入 src 属性值中。你可以搜索一个图片上传插件，看看它们在这些情况下是如何工作的。

希望它可以帮助你。干杯

于 2012-11-10T18:33:39.493 回答