0

Due to the limits on styling file inputs with css I'm trying a new method to hide the input then display the value of in a separate div using JQuery and .html. Here is the code that I have so far:

//Photo
$('#photo').blur(function()
{
var photo=$(this).val();
if (photo.length > 1)
{
$('#photoText').html("Photo Added");
}
});

The problem is that it's not displaying the .html after I have selected a file. Is there a way of getting it to display the html text after selection?

2 Answers 2

0

if I understand your suggestion right , you are implementing a separate text box for the input file , and you want to set the input file path to that text box

here's the code :

 $("#fileUpld").live('change', function () {
            var path = this.value.replace(/^C:\\fakepath\\/i, ''); //for chrome browser 
            $("#inputTxt").val(path);

        });
3
  • .live() is deprecated. Use .on().
    – Antony
    Mar 23, 2013 at 19:20
  • Yes you understand correctly but I can't get this to work for my example, even with .on Mar 23, 2013 at 19:27
  • first make sure if the event of file uploading is fired or not you can know that by debugging the code ,, also make sure that you are using the correct id for the input file and input text
    – user690069
    Mar 23, 2013 at 19:30
0

If I understand your question this code should work:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>

  <script type="text/javascript">        
  /*<![CDATA[*/        
  $(document).ready(function(){
    $('#photo').change(function (){
      var photo=$(this).val();
      if (photo.length > 1){
        $('#photoText').html("Photo Added");
      }
    });
  });
  /*]]>*/
  </script>
</head>
<body>     
  <input type="file" id="photo" />
  <div id="photoText"></div>  
</body>
</html>

There is jsfiddle example

4
  • I can see how these should work but they're not - I'm using jquery/1.4.2/jquery.min.js if that's part of the problem? Mar 23, 2013 at 19:36
  • Hmm, That didn't change things either - May have to use a different approach - Are there any ways of successfully editing File Inputs with CSS? Mar 23, 2013 at 19:39
  • Thanks for your efforts Luka but it's still not working correctly so I'm going to go back to using the default value - Just got to get rid of the inner bevel effect and I think it should be fine in my sites design Mar 23, 2013 at 19:59
  • Do you see the jsfiddle example. I ask you that because maybe I don't understand you very well. If this code doesn't work how you expect please explane what need to be result. Mar 23, 2013 at 20:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.