CODEWITHSUNDEEP
jqueryfile-uploadonclick
TheNameHobbs
TheNameHobbs

Reputation: 729

Open file dialog and submit image by clicking an image

I'm trying to upload an image by clicking on an existing image in a certain element.

So the user will click on an image, the file upload dialog will show, and when the user selects an image from the file dialog the form automatically submits the form and reloads page.

Here is some code I have:

$(document).ready(function() {
        $('#profile').click(function(e){
            $('#fileUploadField').click();
            e.preventDefault();
        });
    header('Location: ' . $current_file);
    });

<form action="" method="post" enctype="multipart/form-data">
    <input type="file" name="profile" id="fileUploadField"> <input type="submit">
</form>

the profile div is where the image is contained

I already have the code to show the image. I just need to open the dialog, and on close, submit the form and refresh page.

Here is my other code:

<?php
        if (isset($_FILES['profile']) === true) {
            if (empty($_FILES['profile']['name']) === true) {
                echo 'Please choose a file!';
            } else {
                $allowed = array('jpg', 'jpeg', 'gif', 'png');

                $file_name = $_FILES['profile']['name'];
                $file_extn = strtolower(end(explode('.', $file_name)));
                $file_temp = $_FILES['profile']['tmp_name'];

                if (in_array($file_extn, $allowed) === true) {
                    change_profile_image($session_user_id, $file_temp, $file_extn);

                    header('Location: ' . $current_file);
                    exit();

                } else {
                    echo 'Incorrect file type. Allowed: ';
                    echo implode(', ', $allowed);
                }
            }
        }

        if (empty($user_data['picture']) === false) {
            echo '<img src="', $user_data['picture'], '" alt="', $user_data['firstname'], '\'s Profile Image" style="height:100px">';
        }
        ?>

Upvotes: 2

Views: 23142

Answers (5)

Bharat
Bharat

Reputation: 6095

I have got far better solution,

as I have same requirement in my MVC application.

HTML : image tag for show image that is bind from back end,

<img class='img img-responsive img-thumbnail' onclick='return OpenFileBrowser(event)' src="@Model.PictureContentBase" alt="" style="cursor:pointer;" />

<input type="file" name="PicturePath" id="fileUpload" accept=".png,.jpg,.jpeg,.gif,.tif" />

JQuery: onclick of that image tag,

function OpenFileBrowser(elem) {
    $('#fileUpload').click()
}

so, my fileUpload selects file, stores it to PicturePath, and when I post form, I got selected image at back end...

Upvotes: 2

Eric Lou
Eric Lou

Reputation: 169

<div class="col-lg-10">

<input type="file" id='upload' class="col-lg-2 form-control" name="img"  onchange="readURL(this);" style="visibility: hidden; width: 1px; height: 1px"/>            

<a href="" onclick="document.getElementById('upload').click(); return false"><img id="blah" src="https://www.digitalocean.com/assets/media/fccmodal/github-c9188b0b.svg" alt="your image" style="width: 250px; height: 250px;"/></a>

</div>

Some jquery :

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

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

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

Upvotes: 2

Sirar Salih
Sirar Salih

Reputation: 2544

See the post by the user hardsetting for a more lightweight and (IMO) a better solution:

<div class="image-upload">
<label for="file-input">
    <img src="placeholder.jpg"/>
</label>

<input id="file-input" type="file"/>
</div>

CSS:

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

Replace input type=file by an image

Upvotes: 3

JayPea
JayPea

Reputation: 9701

It's hard to trigger an input of type file by clicking on something else. The biggest issue that you will run into is that IE will see this as a security concern and might not let you do it (if the input is hidden). To get around this issue, you could "fade" the input behind the image, so that when the user clicks the image, they're actually clicking on the file input.

Your html could look something like this:

<div class="hiddenFileInputContainter">
    <img class="fileDownload" src="/images/ico_upload.png">
    <input type="file" name="fileUp" class="hidden" accept="image/*">
</div>

Then you would need to set the opacity of the input to zero, in order to let the image behind it be visible, without actually removing the input from the page:

input[type='file'].hidden
{
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    font-size: 50px;
    cursor: pointer;
    opacity: 0;
    -moz-opacity: 0;
    filter: Alpha(Opacity=0);
}

You would also need to set the dimensions for the image and the container:

img.fileDownload
{
    height: 26px;
    width: 26px;
    padding: 0;
    display: inline-block; 
    vertical-align: middle;
    margin: 0 4px 0 0;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
}

div.hiddenFileInputContainter
{
    position: relative;
    display: inline-block;
    width: 27px;
    height: 27px;
    overflow: hidden;
    vertical-align: middle;
    cursor: pointer;
}

Notice that the input's dimensions are meant to overflow, so that no matter where you click on the container, you will hit the input inside it. The input is meant to be as large as possible and the actual dimensions of the button are set on the container and the image.

Once you've managed to open the dialog, submitting the form would only be a matter of doing this:

$("#fileUploadField").on("change", function() {
    $("#formId").submit();
});

Upvotes: 5

Four_lo
Four_lo

Reputation: 1150

       <!-- button to open popup -->
        <a href="#yourpopup" data-rel="popup" data-role="button" data-position-to="window" data-transition="flip">Open Popup</a>


        <div data-role="popop" id="yourpopup">
           <form id="yourform">
              ....inputs
            <button type="submit"> submit form</button>
        </div>


       <script>
           $('#yourform').submit( function() {
                $('#yourpopup').popup("close");
           });
       </script>

That is the basic. The general idea will get you there. I assumed you wanted jquery because it was in one of your tags.

Upvotes: 1

Related Questions