html - Need to have input tag instead of browse button in uploading a file in php


I'm a newbie in php programming. I'm currently creating a user profile in which i need to allow users to upload a profile picture. So I've coded like this

<?php echo form_open_multipart('','');?>
<img src="PATH TO IMAGE" />
<input type="text" name="userfile" />
<input type="submit" value="Upload" />

<?php echo form_close();?>

and so I'm getting a structure like the one above.

But what I need is something like the one in the second image.Is this possible... If yes please help or at least share a link.

enter image description here




Basically, what you do is move the default upload input outside of the page for example by setting it's absolute left to -300px. Then you have your own button click to trigger the real one with javascript. Easy as that. P.S. you cannot hide it with visibility or display:none, because it won't trigger. Fortunately moving it away doesn't disable it.




You can not change the default value i.e:Browse but this can be achieved with css by overlapping an image over browse button.

See Below snapshot

In Css Somethig like that(customize it according to your HTML attribute):

div.fakefile img {
    float: left;
    margin: 0 0 0 -96px;

As per your commentI want to browse using browse button and when upload is clicked i need to upload.In addition to this:

<input type="submit" value="upload" name="sub"/>
<input type="file"  name="img"/>

Now you can submit the form by pressing upload button and the image will be uploaded if you have coded for that.Use this function for uploading

People are also looking for solutions to the problem: php - Debugging Codeception tests with Xdebug


Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Similar questions

Find the answer in similar questions on our website.