CODEWITHSUNDEEP
phphtmlcss
Pradeep G
Pradeep G

Reputation: 139

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('','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

Upvotes: 1

Views: 441

Answers (2)

Moeed Farooqui
Moeed Farooqui

Reputation: 3622

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

Upvotes: 0

Andrius Naruševičius
Andrius Naruševičius

Reputation: 8578

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.

Upvotes: 1

Related Questions