I am interested in using an image upload box that includes a hidden input field. However, I have encountered issues with the functionality when the input field is hidden. Does anyone have any suggestions on how

Question

I am interested in using an image upload box that includes a hidden input field. However, I have encountered issues with the functionality when the input field is hidden. Does anyone have any suggestions on how

I have limited experience and need some assistance with resolving this particular issue. I am looking to create an image upload box that works when clicked on the input field. Thank you in advance.

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      $('#picker')
        .attr('src', e.target.result);
    };

    reader.readAsDataURL(input.files[0]);
  }
}

    img {
  max-width: 180px;
}

input[type=file] {
  padding: 0px;
  position: absolute;
  display: ;
  background: ;
}

.card-1 {
  width: 180px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}

.card-1:hover {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card card-1">
  <input type='file' onchange="readURL(this);" />
  <img id="picker" src="http://placehold.it/180" alt="your image" />
</div>

javascript html css

Answer 1

Answer №1

To trigger a click event on the previous sibling element of an input type file element, use the code .click() and

this.previousElementSibling.click()

within the onclick attribute of an <img> element.

Remember to include quotes around the word 'file' in the css selector input[type="file"]. If you want to hide the file input element, set its display property to none.

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      $('#picker')
        .attr('src', e.target.result);
    };

    reader.readAsDataURL(input.files[0]);
  }
}

img {
  max-width: 180px;
}

input[type="file"] {
  padding: 0px;
  position: absolute;
  display: none;
}

.card-1 {
  width: 180px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}

.card-1:hover {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card card-1">
  <input type='file' onchange="readURL(this);" />
  <img onclick="this.previousElementSibling.click()" id="picker" src="http://placehold.it/180" alt="your image" />
</div>

Answer 2

To trigger a click event on the previous sibling element of an input type file element, use the code .click() and

this.previousElementSibling.click()

within the onclick attribute of an <img> element.

Remember to include quotes around the word 'file' in the css selector input[type="file"]. If you want to hide the file input element, set its display property to none.

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      $('#picker')
        .attr('src', e.target.result);
    };

    reader.readAsDataURL(input.files[0]);
  }
}

img {
  max-width: 180px;
}

input[type="file"] {
  padding: 0px;
  position: absolute;
  display: none;
}

.card-1 {
  width: 180px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}

.card-1:hover {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card card-1">
  <input type='file' onchange="readURL(this);" />
  <img onclick="this.previousElementSibling.click()" id="picker" src="http://placehold.it/180" alt="your image" />
</div>

I am interested in using an image upload box that includes a hidden input field. However, I have encountered issues with the functionality when the input field is hidden. Does anyone have any suggestions on how

Answer №1

Similar questions

Sending multiple objects using Ajax and fetching them in PHP

Console Error: Attempting to set the 'className' property of null object results in an

Display Email content within a bootstrap modal using CSS styling

Transfer a JSON object to a Java Class without relying on a servlet

What is causing my HTML wrapper to malfunction?

Transferring data between pages using HTML5 and jQuery

Is it possible for me to adjust these two images to fit the screen perfectly?

Transforming Nested JSON Data into an Interactive HTML Table

SVG path with dynamic elements

AngularJS: Issue with scope not updating across several views

Is it possible to arrange a react map based on the length of strings?

Looking for a way to automatically update your JavaScript code on your Minecraft (Bukkit)

What is the reason behind the functionality of invalid HTML?

Challenges in managing click events

AngularJS directives and controller scope

Discovering useful data like metadata and subject matter through the utilization of either a URL or the webpage itself alongside JQUery

How to build custom middleware with parameters in Node.js

An unexpected 'u' token was encountered in the JSON data at the beginning while parsing with NextJS from the router.query

How can express.js be properly installed using typescript?

Something seems to be preventing Div from appearing and there are no error messages appearing