javascript - 无法加载资源: the server responded with a status of 404 (Not Found) while loading image in img element

Question

我想在从文件选择器对话框中选择图像时加载图像。

下面给出的代码，但它不会加载 img 标记中的图像

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <img id="upload-file-info" />
  <form action="#">
    <label class="btn btn-primary" for="my-file-selector">
    	<input id="my-file-selector" type="file" style="display:none" onchange="$('#upload-file-info').attr('src', this.files[0].name)">Click to select image
    </label>
  </form>
</div>

Answer 1

我相信您想要在 img 标记中预览图像。

您必须将img的src更改为图像的数据URL:

$('#upload-file-info').attr('src', window.URL.createObjectURL(this.files[0]))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <img id="upload-file-info" />
  <form action="#">
    <label class="btn btn-primary" for="my-file-selector">
    	<input id="my-file-selector" type="file" style="display:none" onchange="$('#upload-file-info').attr('src', window.URL.createObjectURL(this.files[0]))">Click to select image
    </label>
  </form>
</div>

服务器给出 404 错误，因为 input 元素未将图像文件添加到服务器。您选择的图像仅保存在浏览器中。