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

Question

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('','class="form-horizontal span4"');?>
<img src="PATH TO IMAGE" />
<input type="text" name="userfile" />
<input class="btn" 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

It looks the same to me. can you tell me the difference. haha — Bk Santiago
– Bk Santiago, Commented Sep 4, 2013 at 6:29
windows.... is there any way to open the browse dialog onclicking in the input box — Pradeep G
– Pradeep G, Commented Sep 4, 2013 at 6:33

Andrius Naruševičius · Accepted Answer · 2013-09-04 06:35:15Z

1

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.

answered Sep 4, 2013 at 6:35

Andrius Naruševičius

8,6289 gold badges53 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Moeed Farooqui · Accepted Answer · 2013-09-04 07:56:09Z

0

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 comment I 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

edited Sep 4, 2013 at 7:56

answered Sep 4, 2013 at 6:49

Moeed Farooqui

3,6281 gold badge20 silver badges23 bronze badges

2 Comments

Moeed Farooqui Over a year ago

Why two buttons ?? you want to upload the image by browse button or Upload ??

Pradeep G Over a year ago

I want to browse using browse button and when upload is clicked i need to upload

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related