如何使用javascript对图片进行用户输入?

时间:2019-12-02 14:34:27

标签: javascript

我一直在我的网站上工作,为了上帝的爱而无法找到一种切实可行的方法。我尝试过,但无法将图片上传到我的网站。我不知道如何访问输入中的信息。甚至有可能吗?

2 个答案:

答案 0 :(得分:1)

是否要将图片上传到您的网站。还是您正在寻找一种允许用户上传图像的表格?

我建议您查看此链接-https://www.w3schools.com/html/html_images.asp

关于HTML和CSS,W3schools为初学者提供了很多很好的教程。

How to make a simple image upload using Javascript/HTML。如果您希望用户这样做,那么已经在此处回答了。请参阅链接。

仅供参考。在此处提出问题时,请尝试尽可能具体。包括您的代码片段等。一般问题可能很难回答:)

答案 1 :(得分:1)

一个简单的Google会回答这个问题,但是您需要执行以下操作。

<input type='file' />
<br><img id="myImg" src="#" alt="your image" height=200 width=100>

此处的Javascript-

window.addEventListener('load', function() {
  document.querySelector('input[type="file"]').addEventListener('change', function() {
      if (this.files && this.files[0]) {
          var img = document.querySelector('img');  // $('img')[0]
          img.src = URL.createObjectURL(this.files[0]); // set src to blob url
          img.onload = imageIsLoaded;
      }
  });
});

function imageIsLoaded() { 
  alert(this.src);  // blob url
  // update width and height ...
}