CODEWITHSUNDEEP
javascriptphpjquery
Shruti Paliwal
Shruti Paliwal

Reputation: 175

PHP Image Upload with one button

I have a PHP script to upload image on my form. It is functioning properly. I have 2 buttons, one to browse for the file (to be uploaded) and the other is a submit button that displays this image on the screen.

I want that on clicking Browse --> selecting file --> clicking OK, the file should get uploaded. Do not need the extra "submit" button.

enter image description here

I am just pasting a part of my code here, that represents these buttons.

<div class="upload_container">
<br clear="all" />
<div id='preview'></div>
<form id="image_upload_form" enctype="multipart/form-data" action="<?php
echo $_SERVER['PHP_SELF'];
?>" method="post" class="change-pic">
<input type="hidden" name="MAX_FILE_SIZE" value="10000000" />
<input style="padding-left:20px; color:#4d4d4d" type="file"  id="file" name="user_image" accept="image/*" />
<script type="text/javascript">
document.getElementById("file").onchange = function() {
document.getElementById("image_upload_form").submit();
};
</script>
</form>
</div>
</div>

Upvotes: 1

Views: 1776

Answers (1)

Pramod Patil
Pramod Patil

Reputation: 2763

You can use onchange function and then submit the form

<input style="padding-left:20px; color:#4d4d4d" type="file" id="file"   name="user_image" accept="image/*" />

document.getElementById("file").onchange = function() {
    document.getElementById("image_upload_form").submit();
};

Upvotes: 5

Related Questions