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

Transfering data to Handlebars while rendering a template

The jQuery target is not able to locate the specified element

What are your thoughts on using inline PHP to assign values to JavaScript variables?

Enhancing jQuery UI Tabs with HoverIntent

Trouble with the $.inArray function

Checking multiple IDs with jQuery to remove a specific class name

When I set my header as "fixed", it automatically adjusts the size of the header box

Combine jQuery and CSS to create a scrollable and extended fixed header

Each time I perform an INSERT operation, I momentarily lose the structure property of my datatable

Create dropdown options from JSON data

The lack of an error event being triggered by jQuery when an ajax call fails has puzzled many users

Implement the CSS display flex property for more flexible layouts

HTML Elements for Displaying Undefined JSON Information

The nested div escapes from its parent div despite the application of clearfix and the correct positioning of relative and absolute elements

Error message on WordPress or NPM: the JavaScript file for Bootstrap cannot run without jQuery loaded first

Utilizing Vue Js and Query to retrieve data from a Jira Rest API endpoint

Using Javascript, load a URL by making a JQuery ajax GET request and specifying custom headers

JQGrid will automatically conceal any row that contains a false value in a given cell

Is it possible for jQuery to eliminate script tags that are delivered through AJAX requests?

What is the proper method to set up jQuery in scripts loaded via AJAX? I keep receiving the error message: 'Uncaught TypeError: Object #<Object> has no method'