Javascript图片上传和显示

10 浏览
0 Comments

Javascript图片上传和显示

我的基本任务是选择图像并显示它，而无需将其保存在数据库中。

为此，

1. 我在HTML中使用了一个select标签，通过它可以上传图像。

2. 我创建了一个空白的图像标签，其中没有图像源，上传图像的替代文本。

3. select标签具有onchange的JavaScript事件处理程序，调用JavaScript函数changeimage。

代码如下：

在上面的代码中，

form_name：是我的表单名称

imagetag：是我的Img标签的名称

filetag：是我的input文件标签的名称

我使用PHP扩展名保存文件。当我尝试打印filetag的值时，它显示为“C:\fakepath\image.png”，对于所有图像都显示此地址。

我将我的PHP文件保存在www位置。

我使用的是Windows 7，WAMP服务器和最新版本的Chrome浏览器。

0

3 答案

0 Comments

Javascript图片上传和显示的问题是因为要实现图片上传和显示功能，需要通过JavaScript来操作。以下是解决方法：

1. 首先，在HTML中添加一个文件上传的input标签和一个用于显示图片的img标签：

2. 在JavaScript中，获取文件上传标签和图片预览标签的引用：

var fileTag = document.getElementById("filetag"),
    preview = document.getElementById("preview");

3. 使用事件监听器，在文件上传标签的change事件中调用changeImage函数：

fileTag.addEventListener("change", function() {
  changeImage(this);
});

4. 在changeImage函数中，获取文件对象并创建一个FileReader对象：

function changeImage(input) {
  var reader;
  if (input.files && input.files[0]) {
    reader = new FileReader();
    reader.onload = function(e) {
      preview.setAttribute('src', e.target.result);
    }
    reader.readAsDataURL(input.files[0]);
  }
}

5. 当文件被选择后，FileReader对象会读取文件并将其转换为DataURL格式。然后，将DataURL赋值给图片预览标签的src属性，实现图片的显示。

通过以上步骤，我们可以实现JavaScript图片上传和显示的功能。这段代码参考了Stack Overflow上的一个解决方案，并使用纯JavaScript进行了实现。同时，我们还避免了在HTML中编写内联脚本，保持了HTML和JS的松耦合。

0
0 Comments

Javascript 图像上传和显示的问题是由于没有正确创建和设置图像元素的源属性导致的。解决方法是使用Image()构造函数创建一个新的HTML图像元素，并通过设置src属性将图像源链接到用户选择的文件。

以下是解决问题的代码示例：

document.getElementById("filetag").addEventListener("change", function(e) {
  let newImg = new Image(width, height);
  // 等同于上面的代码 -> let newImg = document.createElement("img");
  newImg.src = URL.createObjectURL(e.target.files[0]);
  output.appendChild(newImg);
});

在代码示例中，addEventListener()函数用于监听文件选择输入框的change事件。当用户选择了文件后，创建一个新的图像元素newImg，并使用URL.createObjectURL()方法将图像源链接到用户选择的文件。最后，将新的图像元素添加到输出容器中。

以上就是解决Javascript图像上传和显示问题的方法。通过正确创建和设置图像元素的源属性，可以实现图像的上传和显示功能。更多关于HTML图像元素的信息，请参考MDN文档：https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image

0
0 Comments

问题出现的原因：

用户需要在网页上上传图片并显示出来，但是缺少相应的代码实现这个功能。

解决方法：

1. 首先，需要一个input标签用于上传文件，以及一个image标签用于在网页上显示图片。

2. 在HTML中，可以使用以下代码实现：




rendered image

3. 在JavaScript中，可以使用以下代码实现：

const renderFile = () => {
  const render = document.querySelector('img');
  const file = document.querySelector('input[type=file]').files[0];
  const reader = new FileReader();
  
  reader.addEventListener('load', () => {
    render.src = reader.result;
  }, false);
  
  if (file) {
    reader.readAsDataURL(file);
  }
};

4. 每次上传图片后，网页将会显示上传的图片。

5. 可以根据需要，对图片的高度和宽度进行样式设置。

0