Question

在我的Angular UI中，我尝试自定义HTML文件输入。而我所做的就是......

<div class="ui-select form-input" style="display:inline-block; margin-right:5px; margin-bottom:-8px;width:400px;">
    <span class="input-group-btn">
        <label class="btn btn-primary btn-file" for="multiple_input_group">
            <div class="input required">
                <input id="multiple_input_group" type="file" multiple name="files" ng-files="getTheFiles($files)">
            </div> Browse
        </label>
    </span>
    <span class="file-input-label"></span>
</div>

我的myCss.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;
  background: red;
  cursor: inherit;
  display: block;
}
.file-input-label {
    padding: 0px 10px;
    display: table-cell;
    vertical-align: middle;
    border: 1px solid #ddd;
    border-radius: 4px;
}
input[readonly] {
  background-color: white !important;
  cursor: text !important;
}

一切都如预期。我可以浏览文件，但不会在

中显示所选文本

<span class="file-input-label"></span>

HTML文件输入的

。

我试着把下面的javascript放在同一个html文件中，文件输入就在那里，如

<script type="text/javascript">
    $(document).ready(function () {
        $('.btn-file :file').on('fileselect', function (event, numFiles, label) {
            console.log("teste");
            var input_label = $(this).closest('.input-group').find('.file-input-label'),
                log = numFiles > 1 ? numFiles + ' files selected' : label;

            if (input_label.length) {
                input_label.text(log);
            } else {
                if (log) alert(log);
            }
        });
    });
</script>

但它不起作用。我想用正常的html文件输入控件的路径显示所选的文件名。

提前致谢。我从http://codepen.io/gscard/pen/grZEoW

获得了代码

但就我而言，它无效。

“文件上载”输入未显示所选文件名

0 个答案: