Сброс группы ввода файла типа не работает

Я внедрил следующую загрузку файла, которая является input-group на основании ответа this и ее source. Мне нужно сбросить ввод файла и его ввод текста нажатием кнопки «Сброс». Для этого я использовал методы wrap и unwrap на основе ответа this и комментарий this для его сброса. Сброс не работает в eclipse, но отлично работает в JSFiddle и Bootply (не работает в IE 11). Может ли кто-нибудь помочь мне узнать, что случилось?Сброс группы ввода файла типа не работает

File Upload

HTML

<html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>File Upload</title> 
    <script src="js/jquery-1.11.1.js"></script> 
    <script src="bootstrap/js/bootstrap.min.js"></script> 
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="CustomStyleSheet.css"> 
    <script src="CustomJavaScript.js"></script> 
    </head> 
    <body> 
    <div class="container-fluid"> 
     <form class="form-horizontal" id="fileUploadForm"> 
     <div class="row" style="margin-top:15px"> 
      <div class="form-group"> 
      <label class="control-label col-xs-4 col-sm-4 col-md-4">Select File</label> 
      <div class="controls col-xs-6 col-sm-6 col-md-6"> 
       <div class="input-group" id="fileGroup"> 
       <span class="input-group-btn"> 
       <span class="btn btn-primary btn-file"> 
       Browse <input type="file" id="files" multiple> 
       </span> 
       </span> 
       <input type="text" id="fileName" class="form-control" readonly> 
       </div> 
      </div> 
      </div> 
     </div> 
     <div class="row" style="margin-right:15px"> 
      <div class="pull-right"> 
      <button type="button" class="btn btn-default" id="resetFileUpload">Reset</button> 
      <button type="button" class="btn btn-primary">Upload</button> 
      </div> 
     </div> 
     </form> 
    </div> 
    </body> 
</html>

JavaScript

$(document).on('change', '.btn-file :file', function() { 
    var input = $(this), 
     numFiles = input.get(0).files ? input.get(0).files.length : 1, 
     label = input.val().replace(/\\/g, '/').replace(/.*\//, ''); 
    input.trigger('fileselect', [numFiles, label]); 
}); 

$(document).ready(function() { 
    $('.btn-file :file').on('fileselect', function (event, numFiles, label) { 
     var input = $(this).parents('.input-group').find(':text'), 
      log = numFiles > 1 ? numFiles + ' files selected' : label; 
     if (input.length) { 
      input.val(log); 
     } else { 
      if (log) alert(log); 
     } 
    }); 
}); 

function reset_form_element(e) { 
    e.wrap('<form>').closest('form').get(0).reset(); 
    e.unwrap(); 
} 

$('#resetFileUpload').on('click', function (e) { 
    reset_form_element($('#files')); 
    reset_form_element($('#fileName')); 
    e.preventDefault(); 
});

CSS

.btn-file { 
    position: relative; 
    overflow: hidden; 
} 
.btn-file input[type=file] { 
    position: absolute; 
    top: 0; 
    right: 0; 
    min-width: 100%; 
    min-height: 100%; 
    font-size: 100px; 
    text-align: right; 
    filter: alpha(opacity=0); 
    opacity: 0; 
    outline: none; 
    background: white; 
    cursor: inherit; 
    display: block; 
} 
input[readonly] { 
    /*background-color: white !important;*/ 
    cursor: text !important; 
}

источник

2015-01-08 Ram

Просто для подтверждения: вы пытаетесь удалить загруженный файл на стороне клиента?

Попробуйте это в событии щелчка кнопки сброса, где переменная «id» является идентификатором входа для загрузки файла. Он просто устанавливает innerHTML элемента в innerHTML одного и того же элемента. Это работает в ie9 и google chrome, мне не пришлось тестировать другие браузеры.

Кстати, я не знаю, почему это работает (украл его с веб-сайта), если кто-то знает, оставьте комментарий.

document.getElementById(id).innerHTML = document.getElementById(id).innerHTML;

источник

2015-02-02 20:11:01

Я не пытаюсь удалить загруженный файл. Я пытаюсь избавиться от любых выбранных файлов и сбросить его. Я не думаю, что настройка его innerHTML для себя будет работать, но даст ему попробовать. – Ram

На веб-странице есть вход для загрузки файлов. Пользователь нажимает «просматривать» и выбирает файл для загрузки. Теперь вы хотите в браузере в javascript удалить этот файл из ввода файла. Если это то, что вы пытаетесь сделать, код выше сделает это в IE9 и Chrome 40. –

Я просто столкнулся с этой же проблемой в своем приложении. По какой-то причине в IE 11, .reset() в форме не работает, чтобы очистить значение. Однако сброс отлично работает в IE 10, FF и Chrome. Я смог явно установить значение = "" в элементе управления ввода в IE 11, и это очистило его.

источник

2015-04-06 18:14:55 erikaho

Сброс группы ввода файла типа не работает

ответ

Смежные вопросы