Get file name of image before upload - JQuery

Question

I have a form to upload image with:

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

I want when users click to #input_file area to choose image, then the after choosing file, the file name will display immediately in #title field. For example name.png should be name. I want to use JQuery to do this function but don't know how, any advises? Thank in advance.

Please show us the mark up/HTML.

rmondesilva
– rmondesilva

2016-04-21 03:57:40 +00:00
Commented Apr 21, 2016 at 3:57 — rmondesilva
– rmondesilva, Commented Apr 21, 2016 at 3:57

Arun P Johny · Accepted Answer · 2016-04-21 04:03:19Z

9

You can use this.value to get the file value in a change event handler and then extract the name like

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

edited Apr 21, 2016 at 4:03

answered Apr 21, 2016 at 3:52

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ThisClark Over a year ago

If I upload a file named employees_db-full-1.0.6.tar.bz2, the value you print displays employees_db-full-1 truncating some of the actual file name before the extension(s)

Ricardo Maturi · Accepted Answer · 2016-04-21 04:01:50Z

2

You can attach an event after the user chooses an image like this:

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

If the html is like this:

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

edited Apr 21, 2016 at 4:01

answered Apr 21, 2016 at 3:53

Ricardo Maturi

1165 bronze badges

Comments

Sunny S.M · Accepted Answer · 2016-04-21 05:00:50Z

0

Use this sample code to show file name :

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

Here is Demo on jsfiddle

edited Apr 21, 2016 at 5:00

answered Apr 21, 2016 at 4:01

Sunny S.M

6,0261 gold badge40 silver badges38 bronze badges

1 Comment

Sunny S.M Over a year ago

Thanks bro... Happy to help

user229044 · Accepted Answer · 2017-11-19 05:20:21Z

0

You can have name, size and type details of selected file using below code. have a look.

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

edited Nov 19, 2017 at 5:20

user229044♦

241k41 gold badges347 silver badges350 bronze badges

answered Apr 21, 2016 at 3:52

Deepesh kumar Gupta

8962 gold badges12 silver badges31 bronze badges

Collectives™ on Stack Overflow

Get file name of image before upload - JQuery

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related