Question

我已根据this回答及其source实施了以下文件上传，input-group。我需要在单击“重置”按钮时重置文件输入及其文本输入。为此，我使用了基于wrap answer和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;
}

Answer 1

只是为了确认：您是否尝试删除客户端上传的文件？

在重置按钮单击事件中尝试此操作，其中变量“id”是文件上载输入的ID。它只是将元素的innerHTML设置为相同元素的innerHTML。这适用于ie9和谷歌浏览器，我不必测试其他浏览器。

顺便说一句，我不知道为什么会这样（从网站上偷走它），如果有人知道的话请发表评论。

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

Answer 2

尝试一下

var $input = $('#inputId').parents('.form-group').find('input');
$input.val('').trigger('change');
$input.trigger('cleared');

Answer 3

我刚刚在我的应用程序中遇到了同样的问题。出于某种原因，在IE 11中，表单上的.reset（）无法清除该值。重置在IE 10，FF和Chrome中工作正常。我能够明确地设置value =＆＃34;＆＃34;在IE 11中的输入控件上清除它。

重置类型文件的输入组不起作用

3 个答案: