Czyszczenie pola przesyłania pliku HTML za pomocą kodu JavaScript

Question

Chcę zresetować pole przesyłania pliku, gdy użytkownik wybierze inną opcję.

Czy jest to możliwe przez JavaScript? Podejrzewam, że element przesyłania pliku jest traktowany inaczej, ponieważ wchodzi w interakcje z systemem plików użytkownika i może jest niezmienny.

Zasadniczo czego chcę jest coś takiego jak (pseudo-kod):

// Choose selecting existing file 
$('#select-file').bind('focus', function() { 
    // Clear any files currently selected in #upload-file 
    $('#upload-file').val(''); 
}) ; 

// Choose uploading new one - this works ok 
$('#upload-file').bind('focus', function() { 
    // Clear any files currently selected in #select-file 
    $('#select-file').val(''); 
}) ; 

Answer 1

Nie można ustawić wartości wejściowej w większości przeglądarek, ale można utworzyć nowy element, skopiować atrybuty ze starego elementu i zamienić dwa.

Biorąc pod uwagę formę takiego:

<form> 
    <input id="fileInput" name="fileInput" type="file" /> 
</form> 

prostej DOM sposób:

function clearFileInput(id) 
{ 
    var oldInput = document.getElementById(id); 

    var newInput = document.createElement("input"); 

    newInput.type = "file"; 
    newInput.id = oldInput.id; 
    newInput.name = oldInput.name; 
    newInput.className = oldInput.className; 
    newInput.style.cssText = oldInput.style.cssText; 
    // TODO: copy any other relevant attributes 

    oldInput.parentNode.replaceChild(newInput, oldInput); 
} 

clearFileInput("fileInput"); 

Proste DOM sposób. To nie może działać w starszych przeglądarkach, które nie lubią wejść plików:

oldInput.parentNode.replaceChild(oldInput.cloneNode(), oldInput); 

JQuery sposób:

$("#fileInput").replaceWith($("#fileInput").val('').clone(true)); 

// .val('') required for FF compatibility as per @nmit026 

Resetowanie cały formularz za pomocą jQuery: https://stackoverflow.com/a/13351234/1091947

Answer 2

Tak, element wysyłania jest chroniony przed bezpośrednim manipulacji w różnych przeglądarkach. Można jednak usunąć element z drzewa DOM, a następnie wstawić nowy w jego miejsce za pomocą JavaScript. To dałoby taki sam rezultat.

Coś wzdłuż linii:

$('#container-element').html('<input id="upload-file" type="file"/>'); 

Answer 3

Nie koncentrują się wydarzenia, więc będziesz musiał użyć trick tak: Jedynym sposobem, aby usunąć to, aby wyczyścić całą postać

<script type="text/javascript"> 
    $(function() { 
     $("#wrapper").bind("mouseover", function() { 
      $("form").get(0).reset(); 
     }); 
    }); 
</script> 

<form> 
<div id="wrapper"> 
    <input type=file value="" /> 
</div> 
</form> 

Answer 4

Kod skończyło się używanie było,

Dziękuję wszystkim za sugestie i wskazówki!

Answer 5

Spróbuj tego kodu ...

$("input[type=file]").wrap("<div id='fileWrapper'/>"); 
$("#fileWrapper").append("<div id='duplicateFile' style='display:none'>"+$("#fileWrapper").html()+" </div>"); 
$("#fileWrapper").html($("#duplicateFile").html()); 

Answer 6

naprawdę lubię trzymać rzeczy proste jak ten :)

$('input[type=file]').wrap('<form></form>').parent().trigger('reset').children().unwrap('<form></form>'); 

Answer 7

jQuery przetestowane metody pracy grzywny w FF & Chrome:

$(function(){ 
    $.clearUploadField = function(idsel){ 
     $('#your-id input[name="'+idsel+'"]').val("") 
    } 
}); 

Answer 8

W 2014 roku element wejściowy o identyfikatorze obsługuje funkcję val('').

Dla wejścia -

<input type="file" multiple="true" id="File1" name="choose-file" /> 

js To czyści elementu input -

$("#File1").val(''); 

Answer 9

spróbować tej jego pracy grzywny

document.getElementById('fileUpload').parentNode.innerHTML = document.getElementById('fileUpload').parentNode.innerHTML; 

Answer 10

Dla kompatybilności kiedy ajax nie jest dostępny, należy ustawić .val ('') lub wyśle ​​ponownie ostatni plik przesłany przez ajax, który wciąż jest obecny w danych wejściowych. Poniższa powinien prawidłowo wyczyścić wejście zachowując .on() wydarzenia:

var input = $("input[type='file']"); 
input.html(input.html()).val(''); 

Answer 11

Krótszy version że pracuje dla mnie idealna, która jest następująca:

document.querySelector('#fileUpload').value = ""; 

Answer 12

proste rozwiązanie:

document.getElementById("upload-files").value = ""; 

Answer 13

Jeśli masz następujące:

<input type="file" id="FileSelect"> 

potem po prostu zrobić:

$("#FileSelect").val(''); 

zresetować lub jasne ostatnio wybrany plik.

Answer 14

Ten jQuery pracował dla mnie w IE11, Chrome 53, i Firefox 49:

cloned = $("#fileInput").clone(true); 
cloned.val(""); 
$("#fileInput").replaceWith(cloned);