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

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

Answer 2

您可以使用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＆lt; 10）不支持此API

Answer 3

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

希望它对你有所帮助。干杯

抓取输入文件值并制作图像

3 个答案: