Question

The image file name is 'default.jpg']

我想要在点击更改图片按钮时打开输入type=file，一旦选择图像，图像src就会更新。我怎样才能做到这一点？我使用PHP作为服务器端语言并尝试在网页上进行。

Answer 1

您可以使用HTML5 FileReader。你不需要使用PHP或服务器端。

请参阅此JSFidlle：https://jsfiddle.net/166p3uqk/1/

您的INPUT文字不需要表格或值。

<强> HTML：

<input onchange=file_changed() type=file id=input>
<img id=img>

<强>使用Javascript：

function file_changed(){
  var selectedFile = document.getElementById('input').files[0];
  var img = document.getElementById('img')

  var reader = new FileReader();
  reader.onload = function(){
     img.src = this.result
  }
  reader.readAsDataURL(selectedFile);
 }

更多信息：

Answer 2

不知道你是否需要首先将图像上传到服务器但是只是为了前端它可以通过以下方式完成：

<input type="file" class="changeimage" id="changeimage" accept="image/*"/>
<img class="image" src="default.png" style="height:120px"/>
<script>
    document.getElementById("changeimage").addEventListener("change", function(){
        var reader = new FileReader();
        reader.onload = function (e) {
            document.getElementById("image").setAttribute('src', e.target.result);
        }

    });
</script>

您还可以在onchange file input change img src and change image color

找到解决方案

祝你好运：）

选择更新图像作为文件

2 个答案: