javascript - Jquery 中上传的文件未显示

Question

我正在我的代码中尝试实现一个系统，用户可以选择一个文件，然后他们选择的文件可以替换代码中已提供的占位符图像。我在 Jquery 中收到错误找不到文件，上传的文件已损坏，其中有“fakepath”，如下所示: file:///C:/fakepath/IMG_0136.JPG 看起来错误。代码如下。如有任何帮助，我们将不胜感激!

$('.button3').click(function() {
        var fileName = $('.fileName').val().toString().toLowerCase();
        var fileSplit = fileName.split(".");
        var file;

        if (fileSplit[1] == "jpg" || fileSplit[1] == "png") {
            file = $('.fileName').val();
            $('.navbar2 ul li.logo img').attr('src',file);

        }

  <input type="file" class="fileName" name="pic" accept="image/*">
  <a><i class="fa fa-times" aria-hidden="true"></i></a>
  <div class="button3"></div>
  <div class="button3">
     <h2>Submit</h2>
     <div class="loading-signal"></div>
     <div class="successful3"><i class="fa fa-check" aria-hidden="true"></i>
     </div>
  </div>

Answer 1

看看这个 fiddle to preview image after upload

我更改了以下内容:-

1. 输入文件控件的 ID
2. 创建了一个图像标记来预览上传的图像
3. 使用文件阅读器读取上传图片的内容

希望对你有帮助...

HTML:-

    <input type="file" class="fileName" name="pic" id="user_image" accept="image/*">
  <a><i class="fa fa-times" aria-hidden="true"></i></a>
  <div class="button3"></div>
  <div class="button3">
     <h2>Submit</h2>
     <div class="loading-signal"></div>
     <div class="successful3"><i class="fa fa-check" aria-hidden="true"></i>
     </div>
  </div>
  <img id="uploaded_image"/>

Javascript:-

    $('.button3').click(function() {
        var fileName = $('.fileName').val().toString().toLowerCase();
        var fileSplit = fileName.split(".");
        console.log($("#user_image")[0].files);
        if (fileSplit[1] == "jpg" || fileSplit[1] == "png") {
           // below code will store the image.
           var file = $("#user_image")[0].files[0];

           // We will use file reader to read the content of file.
           var reader = new FileReader();
           reader.onload = function (e) {
                $('#uploaded_image').attr('src',e.target.result);
            }
                reader.readAsDataURL($("#user_image")[0].files[0]);

        }
});