CodeIgniter file uploading issue with anchor tag

Question

A peice of code is posted below that I am using for uploading file in CodeIgniter . This works fine but I want to upload the file by clicking anchor tag <a> that has an image on it. Please tell how can I do that?

Code:

<?php echo form_open_multipart('transferdata/uploadfile'); ?>
<?php echo "<input type='file' name='userfile' size='20' />"; ?>
<?php echo "<input type = 'submit' value = 'upload' />"; ?>
<?php echo "</form>"?>

Answer 1

1) Give the form an id as id="fileForm"

2) Add a js event on <a onclick='submitForm()'

3) In js function submit the form like this:

function submitForm(){
  $("#fileForm").submit();

I assume you have jquery else you can directly submit it using JS code as well

Note: Instead of all the steps you can directly add the java code to submit form like this onclick='javascript:JS_CODE_TO_SUBMIT_FORM'

Answer 2

Just add a little bit of javaScript then it will work fine

    <form enctype="multipart/form-data">
        <input type='file' name='userfile' id="userfile" style="display: none;">
        <a href="#" onclick="document.getElementById('userfile').click(); "><img src="https://png.icons8.com/metro/1600/settings.png" style="height: 100px;"></a>
        <input type = 'submit' value = 'upload' />
    </form>

Check this https://jsfiddle.net/Bibhudatta_sahoo/29zpm2se/4/