上传前获取图片文件名 - 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完成此功能，但不知道如何做，请给予建议。提前致谢。

- DinhNgocHien

---

请展示给我们标记/HTML。 - rmondesilva

Answer 1

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

$('#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" />

- Arun P Johny

---

如果我上传了一个名为employees_db-full-1.0.6.tar.bz2的文件，那么你打印的值将显示employees_db-full-1，在扩展名之前截断了一些实际的文件名。 - ThisClark

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">

- Ricardo Maturi

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>

- Deepesh kumar Gupta

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上这里有一个演示：Demo

- Sunny S.M

---

谢谢兄弟...很高兴能帮忙。 - Sunny S.M