To add an image, simply click on the designated area instead of using the traditional file input button. The image will then be displayed in the specified image container and resized on the client-side

Question

To add an image, simply click on the designated area instead of using the traditional file input button. The image will then be displayed in the specified image container and resized on the client-side

Objective:

I am aiming to enhance the image upload functionality by enabling users to click on an <img> element to initiate the file selection process, instead of using the traditional <input type="file"> button. There will be three placeholders initially displayed on the page, and upon clicking on any placeholder, the user can choose a file which will then be displayed in the respective placeholder. Below is what I have implemented so far:

HTML:

<div class="image-upload">
   <label for="file_input1">
       <img id="send_photo_img1" src="assets/images/index2.png"/&>
   </label>
   <input id="file_input1" type="file"/>
</div>

CSS:

.image-upload > input
{
    display: none;
}

.image-upload img
{
    display: inline-block;
    margin-right:6px;
    width: 90px;
    height: 90px;
    cursor: pointer;
}

Jquery:

function readURL(input) {

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

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

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

$("#send_photo_img1").change(function(){
    readURL("#file_input1");
});

While libraries like plupload.js or dropzone.js offer similar functionalities, they come with additional features that are unnecessary for my current project requirements. Therefore, I am customizing the implementation to fit precisely what I need.

The existing code allows me to select an image, but it fails to display it. Currently, after selecting an image, a loading icon appears briefly, but no further action takes place. Additionally, there are no error messages displayed in the Chrome DevTools console.

jquery css image

Answer 1

Answer №1

Discovered the solution, and it turned out to be quite simple:

HTML

<div class="img_upload">
    <img class="send_photo_img" id="send_photo1_img" src="assets/images/index2.png"/>
    <input id="send_photo1" name="send_photo1" class="send_photo_input" type="file"/>
</div>
<div class="img_upload">
    <img class="send_photo_img" id="send_photo2_img" src="assets/images/index2.png"/>
    <input name="send_photo2" class="send_photo_input" type="file"/>
</div>

You can have as many images as you want.

Next, using CSS, hide the <input> element and trigger its click event through JavaScript when the associated <image> is clicked:

CSS

.img_upload input
{
    display: none;
}

JS (to trigger the click)

$(".img_upload img").click(function(){
        img = $(this);
        input = img.next(".send_photo_input");
        var newUrl;

        input.trigger("click");
        input.change(function(){
            newUrl = resize_and_draw(this, img.width());
            url.push(newUrl);
    });
});

Lastly, utilize HTML5 canvas for further processing (almost universally supported except by Opera Mini).

If you're interested in client-side image resizing for bandwidth and load speed considerations, here is the full code:

function resize_and_draw (input, targetH) {

if (input.files && input.files[0] && /\.(jpe?g|png|gif)$/i.test(input.files[0].name)) {

    var reader = new FileReader();
    reader.onload = function (e) {

        var img = new Image();
        img.src = reader.result;
        img.onload = function() {

          canvas = document.createElement( 'canvas');
            canvas.width = img.naturalWidth;   
            canvas.height = img.naturalHeight;
            context = canvas.getContext('2d');
            context.drawImage( img, 0, 0, img.naturalWidth, img.naturalHeight );

                targetHeight = targetH;
            targetWidth = img.naturalWidth * targetHeight / img.naturalHeight;

            //resize
            resample_hermite(canvas, img.naturalWidth, img.naturalHeight, targetWidth*2, targetHeight*2);
            url = canvas.toDataURL("image/png");
            $(input).prev(".send_photo_img").attr('src', url);

        }     
    }

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

    return url;
}
}

Hope this guide aids your endeavors. Cheers!

Answer 2

Discovered the solution, and it turned out to be quite simple:

HTML

<div class="img_upload">
    <img class="send_photo_img" id="send_photo1_img" src="assets/images/index2.png"/>
    <input id="send_photo1" name="send_photo1" class="send_photo_input" type="file"/>
</div>
<div class="img_upload">
    <img class="send_photo_img" id="send_photo2_img" src="assets/images/index2.png"/>
    <input name="send_photo2" class="send_photo_input" type="file"/>
</div>

You can have as many images as you want.

Next, using CSS, hide the <input> element and trigger its click event through JavaScript when the associated <image> is clicked:

CSS

.img_upload input
{
    display: none;
}

JS (to trigger the click)

$(".img_upload img").click(function(){
        img = $(this);
        input = img.next(".send_photo_input");
        var newUrl;

        input.trigger("click");
        input.change(function(){
            newUrl = resize_and_draw(this, img.width());
            url.push(newUrl);
    });
});

Lastly, utilize HTML5 canvas for further processing (almost universally supported except by Opera Mini).

If you're interested in client-side image resizing for bandwidth and load speed considerations, here is the full code:

function resize_and_draw (input, targetH) {

if (input.files && input.files[0] && /\.(jpe?g|png|gif)$/i.test(input.files[0].name)) {

    var reader = new FileReader();
    reader.onload = function (e) {

        var img = new Image();
        img.src = reader.result;
        img.onload = function() {

          canvas = document.createElement( 'canvas');
            canvas.width = img.naturalWidth;   
            canvas.height = img.naturalHeight;
            context = canvas.getContext('2d');
            context.drawImage( img, 0, 0, img.naturalWidth, img.naturalHeight );

                targetHeight = targetH;
            targetWidth = img.naturalWidth * targetHeight / img.naturalHeight;

            //resize
            resample_hermite(canvas, img.naturalWidth, img.naturalHeight, targetWidth*2, targetHeight*2);
            url = canvas.toDataURL("image/png");
            $(input).prev(".send_photo_img").attr('src', url);

        }     
    }

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

    return url;
}
}

Hope this guide aids your endeavors. Cheers!

To add an image, simply click on the designated area instead of using the traditional file input button. The image will then be displayed in the specified image container and resized on the client-side

Answer №1

Similar questions

The test() function in JavaScript alters the output value

How to maintain the focus within a jQuery dialog box

Obtaining data using Classic ASP from an ajax JSON post can be achieved by following these

How can the table header be displayed in a Vue JS application after receiving the server response?

Guide to adding a line break following each set of 200 characters utilizing jQuery

Using the ternary operator in various CSS rules

The right column in a relatively positioned layout descends as an element in the left column is revealed

Expanding the `div` element to visually occupy the entire vertical space

Having trouble getting the .toggle() function with classList to work on one element, despite working fine on others

Dynamic row additions causing vanishing rows in the table due to JS/jQuery implementation

Ways to insert user data into a hidden input field

Can you generate a new element based on a template element?

Tips for creating a clickable A href link in the menu bar that triggers an accordion to open in the body when clicked - html

Optimizing web layouts to fit on a single page is the most effective

Is there a way to ensure that when displaying information boxes with Bootstrap, the inputs do not get misplaced or shuffled to the wrong location

Troubleshooting a problem with CSS Matrix animations

Tips for concealing the URL in the address bar while using `<a href>` links

Is HTML5 data-target used for loading pages?

Showing information from the data text option

How can I detect the scroll action on a Select2 dropdown?