Javascript图片上传和显示-Java 学习之路

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

为了这

1.我在html中创建了一个select标签，通过它我可以上传图像 .

2.我做了一个空白的图像标签，其中没有图像源，交替是上传图像 .

3.select标签有onchange javascript事件处理程序，它调用javascript函数changeimage .

<script>
       function changeimage()
       {
            document.form_name.imagetag.src=document.form_name.filetag.value;
       }
</script>

在上面的代码中

form_name：是我的表单的名称

<form name = "form_name">

imagetag：是我的Img标签的名称

<Img src=" " name = "imagetag">

filetag：是我的名字

<input type="file" name = "filetag" onchange="changeimage()">

我使用php扩展名保存文件 . 当我尝试打印filetag的值时，它显示“C：\ fakepath \ image.png”，显示所有图像的这个地址 . 我已将我的php文件保存在www位置 .

我正在使用Windows 7，wamp服务器和chrome最新版本 .

1 回答

您可能想要查看此solution（我的代码派生自的地方） . 它涉及一些jQuery，但如果你真的必须用纯JS写出来，你就去了 .

Note: 我修改了你的标签以符合下面的JS . 还要尽量避免编写任何内联脚本 . 始终保持HTML和JS松散耦合 .

var fileTag = document.getElementById("filetag"),
    preview = document.getElementById("preview");
    
fileTag.addEventListener("change", function() {
  changeImage(this);
});

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

<input type="file" id="filetag">
<img src="" id="preview">

回复于 2024-04-25T19:48:29+08:00

Javascript图片上传和显示

1 回答

相关问题