views:

7396

answers:

3

This code should work in IE (don't even test it in Firefox), but it doesn't. What I want is to display the name of the attached file. Any help?

<html>
<head>
  <title>example</title>    
  <script type="text/javascript" src="../js/jquery.js"></script>
  <script type="text/javascript">  
     $(document).ready( function(){            
      $("#attach").after("<input id='fakeAttach' type='button' value='attach a file' />");      
      $("#fakeAttach").click(function() {            
        $("#attach").click();        
        $("#maxSize").after("<div id='temporary'><span id='attachedFile'></span><input id='remove' type='button' value='remove' /></div>");        
        $('#attach').change(function(){
          $("#fakeAttach").attr("disabled","disabled");          
          $("#attachedFile").html($(this).val());
        });        
        $("#remove").click(function(e){
          e.preventDefault();
          $("#attach").replaceWith($("#attach").clone());
          $("#fakeAttach").attr("disabled","");
          $("#temporary").remove();
        });
      })
    }); 
  </script> 
</head>
<body>
  <input id="attach" type="file" /><span id="maxSize">(less than 1MB)</span>    
</body>
</html>
+6  A: 

It is just such simple as writing:

$('input[type=file]').val()

Anyway, I suggest using name or ID attribute to select your input. And with event, it should look like this:

$('input[type=file]').change(function(e){
  $in=$(this);
  $in.next().html($in.val());
});
Thinker
Thank you! That worked on the previous (and simplified) problem I posed, but it doen't work on the extended version.
Short and clear answer, +1
o15a3d4l11s2
A: 
//get file input
var $el = $('input[type=file');
//set the next siblings (the span) text to the input value 
$el.next().text( $el.val() );
redsquare
A: 

I had used following which worked correctly.

$('#fileAttached').attr('value', $('#attachment').val())
ihmar