Question

我在我的代码中玩游戏并尝试将系统实现到用户可以选择文件的位置，然后他们选择的文件可以替换代码中已经提供的占位符图像。我在Jquery中收到错误找不到该文件，上传的内容已损坏且其中包含“假冒路径”。像这样：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

以下是将选中的图像加载到img中的片段，我不确定这是否是您需要的，希望它会有所帮助（选择图像文件然后点击提交）

＆＃13;

	$('.button3').click(function() {
        files = $('input[type=file]').get(0).files;
        if(files.length == 0)
        	{
        		alert('No files selected');
        		return;
        	}
		fr = new FileReader();
		fr.onload = function () 
			{
            	$('img').attr('src',fr.result);
        	}
        fr.readAsDataURL(files[0]);
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" class="fileName" name="pic" accept="image/*">
 
  <div class="button3">
     <h2>Submit</h2>
  </div>
  <img src="">

＆＃13;

Answer 2

看看这个小提琴to preview image after upload

我改变了以下事项： -

ID输入文件控件
创建图像标记以预览上传的图像
使用过的文件阅读器阅读上传图片的内容

希望它有所帮助...

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]);

        }
});

Answer 3

除非您知道用户上传图片的确切位置，否则我认为它不会起作用。您可能必须让用户将图像上传到您的服务器。它也是您浏览器的安全保护。 How to resolve the C:\fakepath?

（此外，您还错过了.click功能的右括号。将)}添加到最后。

在Jquery中上传的文件没有显示

3 个答案: