Custom look for file selector

Custom look for file selector

Here is a way of adding custom styled buttons for file selctor inputs. Working: Overlay a transparent "<input type="file" />" over a styled button or other element

Code:

    <div id="" style="height: 30px; overflow: hidden; position: absolute; width: 300px; word-break: keep-all;">
        <input style="width: 100px;" type="button" value="select" />
            <span id="files">
                No files selected.      
            </span>
        </div>
        <input id="selector" style="height: 30px; opacity: 0; position: absolute; width: 100px;" type="file" />
    </div>

Try this on jsFiddle: http://jsfiddle.net/bMb59/

Multi file select with ajax upload: here

OR copy & paste the following link to address bar of your browser

http://customphpfunctions.blogspot.in/2014/12/handle-images-uploaded-using-multi-file.html