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

我有一个表格可用于上传图像：

<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#u file

区域选择图像时，选择文件后，文件名将立即显示在

#title

字段中。例如

name.png

应该是

name

。我想用JQuery来实现这个功能，但不知道怎么做，有什么建议吗？提前感谢。

您可以使用

this.value

在更改事件处理程序中获取文件值，然后提取名称，如

$（'#文件_输入'）。更改（函数（）{
//$（'#title'）.val（this.value？this.value.match（/（[\w-\]+）（？=\）/）[0]：''；
$（'#title'）.val（this.files&&this.files.length？this.files[0].name.split（'.）[0]：''）；
})

---

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

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

$（'#file'）.change（函数（）{
var file=this.files[0]；
name=file.name；
size=file.size；
type=file.type；
//你的验证
});

用户选择以下图像后，可以附加事件：

$(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);
    });
});

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

如果html如下所示：

$(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);
    });
});

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

---

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

<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);
  });
})();

提交
$（函数（）{
$（'#btn'）。在（'click'，function（）上{
变量名称=$（'\'文件'）.val（）.split（'\\'）.pop（）；
name=name.split（'.'）[0]；
$（'#fname'）.html（名称）；
});
})();

---

这里是jsfiddle上的

请显示标记/HTML。如果我上传一个名为

employees\u db-full-1.0.6.tar.bz2

的文件，您打印的值将显示

employees\u db-full-1

在扩展名之前截断一些实际文件名，谢谢兄弟。。。很乐意帮忙