Replace input type=file with image
P粉567281015
P粉567281015 2023-10-13 13:47:35
0
1
523

Like many people, I wanted to customize the uglyinput type=file, and I knew it couldn't be done without some hacks and/orjavascript. However, the problem is that, in my case, the upload file button is only for uploading images (jpeg|jpg|png|gif), so I want to know if I can use "clickable" The image is exactly the same as the input type file (the dialog box is shown and the same $_FILE is shown on the submitted page).

I found some workaround here, which is also interesting (but doesn't work in Chrome =/).

When you want to add some styling to the file button, what do you do? If you have any opinions on this please hit the answer button ;)

P粉567281015
P粉567281015

reply all (1)
P粉158473780

This works great for me:

.image-upload>input { display: none; }

Basically, theforattribute of a label makesclicking on the label the same as clicking on the specified input.

Also, setting the display property to none allows the file input to not be rendered at all, thus hiding it cleanly.

Tested in Chrome, but according to the web, should work in all major browsers. :)

edit:JSFiddle added here:https://jsfiddle.net/c5s42vdz/

    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template
    About us Disclaimer Sitemap
    php.cn:Public welfare online PHP training,Help PHP learners grow quickly!