How to clear files from 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): http://stackoverflow.com/questions/1043957/clearing-input-type-file-using-jquery — PaTT, Jan 20 '17 at 09:06
also your fiddle, is missing a link to jQuery so it fails on the first `$` — Joel Harkes, Jan 20 '17 at 09:07
Possible duplicate of [Clearing using jQuery](http://stackoverflow.com/questions/1043957/clearing-input-type-file-using-jquery) — AymDev, Jan 20 '17 at 09:11

score 4 · Accepted Answer · edited Oct 17 '18 at 08:40

4

Using JavaScript you can do that as follows.

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

edited Oct 17 '18 at 08:40

AshHimself

4,024
1
21
26

answered Jan 20 '17 at 09:16

Bandara

283
2
4
17

@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. – Ionut Necula Jan 20 '17 at 09:26
@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. – isuru Jan 20 '17 at 09:35
`document.getElementById("control").value = "";` there is a mistake in the answer '#' needs to be removed. – 730wavy Dec 29 '22 at 01:26

Ionut Necula · Answer 2 · 2017-01-20T09:09:04.093

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 '17 at 09:09

answered Jan 20 '17 at 09:07

Ionut Necula

11,107
4
45
69

This seems correct but it's not working in my script. – isuru Jan 20 '17 at 09:18
@isuru, do you have `jQuery` library included? – Ionut Necula Jan 20 '17 at 09:18
Yes. My JQuery version is v1.11.3. I think it is the issue. – isuru Jan 20 '17 at 09:20
@isuru, that shouldn't be the problem. I've made a fiddle just to check https://jsfiddle.net/y3rvmLx9/ and it works. Somewhere else should be the problem. – Ionut Necula Jan 20 '17 at 09:23
1

Yes it should be worked. I cannot find the issue. However `document.getElementById("#mcontrol").value = "";` solved the issue. – isuru Jan 20 '17 at 09:25

score 1 · Answer 3 · answered Jan 20 '17 at 09:23

1

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

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

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

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

answered Jan 20 '17 at 09:23

Yaswanth

49
1
9

1

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. – Newd Jan 20 '17 at 15:00

How to clear files from using jQuery or JavaScript

3 Answers3