如何使用 html 代码从本地文件中 select 图像

Question

Hello everyone I was asked to design a mini page like below using HTML CSS and JS but I am having a problem. When we click on the "+ visual" expression, it is asked to select a visual from the local folder and have a preview, but I did not succeed. I tried to do it with <input type = "file" but Choose File should not appear and it should have a + button. I'm so confused please help.

Html

<div id="imgbox"> <img id="imgsrch" name="imgsrch" src="images/Button.png" width="120px" onClick="imageReflesh(imgsrch)"></div>

JavaS

<script language="javascript"> function imageReflesh(imgsrch){document.getElementById("imgsrch").src="images/images.jpg";}</script>

That's the work I'm doing as an alternative, better if I have the chance to convert this. Thank you

My Work

Answer 1

There are two parts to this question:

• getting it so the user can select an image from their local filestore on clicking the plus sign
• displaying the selected image as a preview

The user can select a file if we use an input element with type="file". However, it would be preferable if they were taken straight to the selection method in their system rather than see a standard HTML input element.

We can do that by hiding the input element and having a click on the plus sign create a click on the input element.

When a file has been selected we can only see its name, not the full local path (this is for security reasons) so we can't just load the preview image's src attribute. Instead we have to read the file and put the contents into the preview image.

Here is a snippet which does these two things. Of course you will want to format things in the way required by your mini page.

 const plusSign = document.querySelector('#plussign'); const getFile = document.querySelector('#getfile'); plusSign.addEventListener('click', function () { getFile.click(); }); getFile.addEventListener('change', function () { preview(getFile.files[0]); }); function preview(file) { const img = document.querySelector('#previewimg'); img.classList.add("obj"); img.file = file; const reader = new FileReader(); reader.onload = (function(image) { return function(e) { image.src = e.target.result; }; })(img); reader.readAsDataURL(file); }

 <div id="plussign" style="font-size: 5em;">+</div> <input type="file" id="getfile" accept="image/*" style="display:none;"> <img id="previewimg"/>

A useful source on using local files can be found here: https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications

Answer 2

Not sure if I understood your question clearly, but perhaps by using both a label tag and an input[type=file] tag and setting the input's display property to none, like so:

<div id="imgbox">
      <label for="file"><img src="./images/Button.png" alt="" /></label>
      <input type="file" name="file" id="file" style="display: none;"/>
</div>

Answer 3

Maybe this variant your will suit:

<div id="imgbox"> <img id="imgsrch" name="imgsrch" src="images/Button.png" width="120px" 
onClick="imageReflesh(imgsrch)"></div>

<input style="display: none" id="myInputForm" type="file">

<script language="javascript">
function imageReflesh(imgsrch){document.getElementById("myInputForm").click();}
</script>