How to clear files from <input type='file' /> using jQuery or JavaScript

Question

There are several <input type='file' /> fields in my file and there are no any html forms. I want to clear attached files from particular <input type='file' />. Not from the all fields. I have use $('input').val(""); but it clears all the <input type='file' /> fields. So how I clear the attached files from particular <input type='file' /> field?

var control = $("#mcontrol");

$("#clear").on("click", function() {
  $('input').val("");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="mcontrol" /><br>
<input type="file" id="mcontrol2" />
<button id="clear">Clear</button>

Here is the fiddle

Look here (using jquery): stackoverflow.com/questions/1043957/… — PaTT
– PaTT, Commented Jan 20, 2017 at 9:06
also your fiddle, is missing a link to jQuery so it fails on the first $ — Joel Harkes
– Joel Harkes, Commented Jan 20, 2017 at 9:07
Possible duplicate of Clearing <input type='file' /> using jQuery — AymDev
– AymDev, Commented Jan 20, 2017 at 9:11

AshHimself · Accepted Answer · 2018-10-17 08:40:49Z

4

Using JavaScript you can do that as follows.

document.getElementById("#control").value = "";

edited Oct 17, 2018 at 8:40

AshHimself

4,1821 gold badge24 silver badges26 bronze badges

answered Jan 20, 2017 at 9:16

Bandara

2832 gold badges4 silver badges17 bronze badges

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

3 Comments

Ionut Necula Over a year ago

@isuru, can you please explain how this is different from my answer if you say you have jQuery included? I think you either have the jQuery included incorrectly or you don't include it at all. This answer is the same as mine only pure JavaScript way.

isuru Over a year ago

@Ionut As I think it should be jQuery version problem. I tried with your answer but it returns Uncaught TypeError: control.val is not a function at HTMLImageElement.img.onload error.

730wavy Over a year ago

document.getElementById("control").value = ""; there is a mistake in the answer '#' needs to be removed.

Ionut Necula · Accepted Answer · 2017-01-20 09:09:04Z

2

You can use the id you already have set:

var control = $("#mcontrol");
$("#clear").on("click", function() {
  control.val("");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="mcontrol" />
<br>
<input type="file" id="mcontrol2" />
<button id="clear">Clear</button>

edited Jan 20, 2017 at 9:09

answered Jan 20, 2017 at 9:07

Ionut Necula

11.6k4 gold badges49 silver badges72 bronze badges

5 Comments

isuru Over a year ago

This seems correct but it's not working in my script.

Ionut Necula Over a year ago

@isuru, do you have jQuery library included?

isuru Over a year ago

Yes. My JQuery version is v1.11.3. I think it is the issue.

Ionut Necula Over a year ago

@isuru, that shouldn't be the problem. I've made a fiddle just to check jsfiddle.net/y3rvmLx9 and it works. Somewhere else should be the problem.

isuru Over a year ago

Yes it should be worked. I cannot find the issue. However document.getElementById("#mcontrol").value = ""; solved the issue.

Yaswanth · Accepted Answer · 2017-01-20 09:23:28Z

1

// For first file feild 
$("#clear").on("click", function () {

    $('#mcontrol1').val("");
});

// For second file feild 
$("#clear").on("click", function () {

    $('#mcontrol2').val("");
});

answered Jan 20, 2017 at 9:23

Yaswanth

791 silver badge9 bronze badges

1 Comment

Newd Over a year ago

Please try to provide context with your answer. A standalone answer may solve a problem in this specific scenario, but an explanation may solve many future problems. Try to include what you think is causing the issue and why your answer will solve it.

Collectives™ on Stack Overflow

How to clear files from <input type='file' /> using jQuery or JavaScript

3 Answers 3

3 Comments

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related