Clear file input field after file selected using JQuery on select change

Question

Using a Jquery plugin called filestyle from: http://www.appelsiini.net/projects/filestyle. I have a select box with an id of adtype. If the selected option has a value of 7, it'll disable the file input with the id of 'adfile'.

The problems becomes when a user has already selected a file. I cant find a way to clear the file input and then disable it. $('#adfile').val(''); does not work.

JQUERY

$(function(){
  $('#adtype').change(function(){
    if($('#adtype option:selected').val()==="7"){
      $('#adfile').val('');
      $("#adfile").prop('disabled', true);
    }else{
      $("#adfile").prop('disabled', false);
    }
  });
});

HTML

<form id="someform" action="somepage" method="post">
  <select name="selectstuff" id="adtype">
    <option value="1">one</option>
    <option value="5">five</option>
    <option value="7">seven</option>
  </select>

  <input type="file" id="adfile" value="" />

  <input type="submit" value="submit" />
</form>

Dhiraj · Accepted Answer · 2012-05-12 19:06:26Z

6

I used $('#adfile').val(''); and $('#adfile').attr('disabled', 'disabled');

DEMO

NOTE: filestyle plugin removes id,name attributes from the file input element and adds file as class. I'm accessing this element with reference to the form.

Hope this helps

edited May 12, 2012 at 19:06

answered May 12, 2012 at 18:45

Dhiraj

33.7k10 gold badges65 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Patriotec Over a year ago

I'm accepting your answer, although it wont work on my page. I believe the filestyle plugin from: appelsiini.net/projects/filestyle is interfering with clearing the file input field. If I remove the filestyle plugin, I can clear the field. Thanks.

Dhiraj Over a year ago

you should have mentioned about that in your question, you could have got a more accurate answer

Patriotec Over a year ago

Thanks to you I figured it out. Set the .file class value to "" AND disable the file input id adfile" $('#addaduploadform .file').val(''); $('#adfile').attr('disabled', 'disabled');

CDspace · Accepted Answer · 2016-11-09 20:47:14Z

1

$(":file").filestyle('clear');

edited Nov 9, 2016 at 20:47

CDspace

2,69919 gold badges32 silver badges39 bronze badges

answered Nov 9, 2016 at 17:17

Mohammed Nafie

4341 gold badge5 silver badges16 bronze badges

Comments

Brad Larson · Accepted Answer · 2012-09-15 20:56:24Z

0

<html>
<head>

<script type="text/javascript">
$(document).ready(function(){
    $('#adtype').change(function(){
        if($('#adtype option:selected').val()==="7"){
            $('#adfile').remove();
            $('#file_div').html('<input type="file" id="adfile" value="" />')
            $("#adfile").prop('disabled', true);
        }else{
            $("#adfile").prop('disabled', false);
        }
    });
});

</script>
</head>

<body>
    <div id="signup">
        <form id="someform" action="somepage" method="post">
       <select name="selectstuff" id="adtype">
<option value="1">one</option>
<option value="5">five</option>
<option value="7">seven</option>
</select>
        <div id="file_div">
         <input type="file" id="adfile" value="" />

        </div>

        <input type="submit" value="submit" />
        </form>

    </div>

</body>

</html>

edited Sep 15, 2012 at 20:56

Brad Larson

170k45 gold badges401 silver badges574 bronze badges

answered May 12, 2012 at 18:55

pankil thakkar

4111 gold badge5 silver badges15 bronze badges

2 Comments

Patriotec Over a year ago

I tried that technique yesterday. Won't work. I'll just chalk this up to the filestyle plugin interfering with the other JQuery. Thanks for the effort

pankil thakkar Over a year ago

i have checked it in ie and all other browser.it works fine just add jquery.js in this code and test.

Web Developer India · Accepted Answer · 2015-01-08 12:56:34Z

0

This worked for me.

$("#Elementid").val(null);

answered Jan 8, 2015 at 12:56

Web Developer India

67713 silver badges14 bronze badges

Collectives™ on Stack Overflow

Clear file input field after file selected using JQuery on select change

4 Answers 4

3 Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related