Question

在这种形式中，我有字段文件名，我想让用户键入他想要的文件名或从文件系统中选择文件名。所以我希望他选择他的文件，然后选择文件名来填写输入标签的文本。这可能吗？你能看出我能纠正的任何明显错误吗？

<div class="modal-body">                                                     
    <div class="form-group row">
        <label class="col-sm-3 col-form-label">File name</label>
            <div class="col-sm-9">
               <input type="text" class="form-control" name="name" id="modal-add-tech-file-name" required>
                   <span>
                       <form>
                            <label for="file-add-upload" class="custom-file-upload">
                                <i class="fa fa-cloud-upload"></i> Select file
                            </label>
                            <input id="file-add-upload" name='upload_cont_img' type="file" style="display:none;">
                       </form>
                  </span>
            </input>
        </div>
    </div>                         
</div>

这是处理按钮并发出ajax请求的文件中的代码。

$('#file-add-upload').change(function() {
    var i = $(this).prev('label').clone();
    var file = $('#file-upload')[0].files[0].name;
    $('#modal-add-tech-file-name').val(data(file)); 
    //$("#modal-edit-tech-file-name").prev('label').text(file);
});

Answer 1

你的身份证错了。您的html中甚至没有引用#file-upload。我将其更改为#file-add-upload并使用$('#file-add-upload').val()获取了文件的名称。之后我只需使用您的代码将文件名设置为文本字段的值。请参阅下面的示例。

$('#file-add-upload').change(function() {
    var filename = $('#file-add-upload').val();
    $('#modal-add-tech-file-name').val(filename); 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal-body">
   <div class="form-group row">
      <label class="col-sm-3 col-form-label">File name</label>
      <div class="col-sm-9">
         <input type="text" class="form-control" name="name" id="modal-add-tech-file-name" required/>
         <span>
            <form>
               <label for="file-add-upload" class="custom-file-upload">
               <i class="fa fa-cloud-upload"></i> Select file
               </label>
               <input id="file-add-upload" name='upload_cont_img' type="file" style="display:none;"/>
            </form>
         </span>
      </div>
   </div>
</div>

在输入标记中输入文件选择的名称结果

1 个答案: