javascript - 使用 html 和 javascript 将图像上传到 html 页面

Question

我正在尝试使用该<input type="file">元素在 html 页面中上传图像。我想用上传的图片替换页面上的另一张图片。但是，控件不会传递给 java 脚本函数。我试图找出控制不通过的原因。下面是我正在使用的代码：

<label>Upload a Picture</label
<img src="unknown_person.jpg" height="250" width="250"></img>

<div>
   <form name="image1"  enctype="multipart/form-data" action="/" method="POST" onsubmit="return UploadPic()">
      <input type="file" name="imgfile"></input>
   </form>
</div>

提前致谢。

Answer 1

您无法在 Java Script 中拦截文件上传。文件必须上传到服务器，然后页面必须重新渲染

Answer 2

一种方法是使用 AJAX 来查询后端的图像上传位置。像这样

var pullImage = function()
{
  // do ajax work
  return image ? propagateHTML('element', image.uri) : fallback();
}

var propagateHTML = function(id, uri)
{
  document.getElementById(id).innerHTML = uri;
}