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在更改事件处理程序中获取文件值，然后提取名称，如

＆＃13;

$('#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] : '');

})

＆＃13;

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

＆＃13;

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上的Demo

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

4 个答案: