Jump to content

Styling an Upload box


Nathan
 Share

Recommended Posts

  • Administrators

I recently needed to style an upload box.  I couldn't find any place to do this within the css.  Turns out it isn't possible without jquery as far as I could tell.

 

I needed to take the default:

old.jpg

 

I needed it to look like:

new.jpg

 

Got it working with the following:

 

The HTML


 

<div id="file" class="btn">Upload Photo</div>
<input type="file" name="file" />

 

The CSS

 

#file { display:none; }

 

The Javascript


 

var wrapper = $('<div/>').css({height:0,width:0,'overflow':'hidden'}); var fileInput = $(':file').wrap(wrapper); fileInput.change(function(){ $this = $(this); $('#file').text("File attached"); }) $('#file').click(function(){ fileInput.click(); }).show();

 

From the very intelligent folks at Stack Overflow

Variation 1: Image button

If you would like to use an image button instead, simple add your image code instead of “Upload Photo” like this:

 

The HTML

 

<div id="file"><img src="/images/button-image.jpg"></div>
<input type="file" name="file" />

 

Variation 2: File name

If you would like to use the file name instead of the text “File attached”, you could try the following Javascript, courtesy of the brainy folks of StackOverflow, the only code that is highlighted:

 

The Javascript


 

 var wrapper = $('<div/>').css({height:0,width:0,'overflow':'hidden'});
 var fileInput = $(':file').wrap(wrapper);

 fileInput.change(function(){
    $this = $(this).val().replace(/C:\\fakepath\\/i, '');
 $('#file').text($this);
 })

 $('#file').click(function(){
    fileInput.click();
 }).show();
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...