Posted By

localhorst on 07/16/09


Tagged

fileuploadcss


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

wizard04
raz


style/customize fileupload field hack


 / Published in: jQuery
 

URL: http://blog.vworld.at/2008/08/21/styling-an-input-typefile-using-jquery/

little enhancement of the jquery verion of this: http://www.quirksmode.org/dom/inputfile.html

  1. <input name="imgfile" id="imgfile" type="file" size="37" title="browser"/>
  2. <style>
  3. /* fakefileinput with jQuery */
  4.  
  5. div.fileinputs {
  6. position: relative;
  7. }
  8.  
  9. div.fakefile {
  10. position: absolute;
  11. top: 0px;
  12. left: 0px;
  13. z-index: 1;
  14. }
  15.  
  16. input.file {
  17. position: relative;
  18. text-align: right;
  19. height:28px;
  20. -moz-opacity:0 ;
  21. filter:alpha(opacity: 0);
  22. opacity: 0;
  23. z-index: 2;
  24. }
  25. </style>
  26.  
  27.  
  28. jQuery(document).ready(function() {
  29. $('input[type=file]').each(function(){
  30.  
  31. var uploadbuttonlabeltext = $(this).attr('title'); //get title attribut for languagesettings
  32. if(uploadbuttonlabeltext == ''){
  33. var uploadbuttonlabeltext = 'Browse';
  34. }
  35.  
  36. var uploadbutton = '<input type="button" class="button_button" value="'+uploadbuttonlabeltext+'" />';
  37. $(this).wrap('<div class="fileinputs"></div>');
  38. $(this).addClass('file').css('opacity', 0); //set to invisible
  39. $(this).parent().append($('<div class="fakefile" />').append($('<input type="text" />').attr('id',$(this).attr('id')+'__fake')).append(uploadbutton));
  40.  
  41. $(this).bind('change', function() {
  42. $('#'+$(this).attr('id')+'__fake').val($(this).val());;
  43. });
  44. $(this).bind('mouseout', function() {
  45. $('#'+$(this).attr('id')+'__fake').val($(this).val());;
  46. });
  47. });
  48.  
  49. });

Report this snippet  

You need to login to post a comment.