在上传之前获取图像的文件名--JQuery

Question

我有一个表单上传图像：

<div class="col-sm-4">
 <input id="file_input" type="file" style="visibility: hidden; width: 0; height: 0" name="image[photo_new]" accept="image/*">
</div>
<div class="col-lg-8">
  <div class="form-group row">
    <label class="col-sm-3 control-label" for="title">
      <label for="image_title">Title</label>
    </label>
    <div class="col-sm-9">
      <input id="title" class="form-control" type="text" placeholder="Title" name="image[title]" maxlength="200">
    </div>
  </div>
</div>

我想当用户点击#input_file区域选择图片，然后在选择文件后，文件名将立即显示在#title字段中。 例如， name.png应该是name 。 我想用JQuery来做这个功能，但不知道如何，任何建议？ 预先感谢。

Answer 1

您可以使用this.value在change事件处理程序中获取文件值，然后提取名称

 $('#file_input').change(function() { //$('#title').val(this.value ? this.value.match(/([\\w-_]+)(?=\\.)/)[0] : ''); $('#title').val(this.files && this.files.length ? this.files[0].name.split('.')[0] : ''); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="file_input" type="file" /> <input id="title" /> 

Answer 2

您可以在用户选择如下图像后附加事件：

$(document).ready(function() {
    $('#image').on('change', function(event) {
        // and you can get the name of the image like this:
        console.log(event.target.files[0].name);
    });
});

如果html是这样的：

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

Answer 3

您可以使用以下代码获取所选文件的名称，大小和类型详细信息。 看一看。

<form enctype="multipart/form-data">
<input id="file" type="file" />
<input type="submit" value="Upload" />
</form>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$('#file').change(function(){
 var file = this.files[0];
 name = file.name;
 size = file.size;
 type = file.type;
 //your validation
 });
</script>

Answer 4

使用此示例代码显示文件名：

<input type="file" name="file" id="file" />
<button  id="btn">Submit</button>
<div id="fname"></div>

 $(function(){
    $('#btn').on('click',function(){
    var name = $('#file').val().split('\\').pop();
    name=name.split('.')[0];
    $('#fname').html(name);
  });
})();

这是关于jsfiddle的演示