Remove users file path from my file upload input

Question

Resolved: The fixed Fiddle thanks to @Abdallah Arffak

I would like to remove the ../../../ from a chosen file to upload and instead simply show the file name such as index.html or whatnot.

JSFiddle: http://jsfiddle.net/5u5ovxdL/

HTML

<div id="file">Chose file</div>
<input type="file" name="file" />

JQuery

var wrapper = $('<div/>').css({height:0,width:0,'overflow':'hidden'});
var fileInput = $(':file').wrap(wrapper);

fileInput.change(function(){
    $this = $(this);
    $('#file').text($this.val());
})

$('#file').click(function(){
    fileInput.click();
}).show();

possible duplicate of Need a basename function in Javascript — Brewal
– Brewal, Commented Jan 15, 2015 at 15:15
I want to trail back to the '/' does that other question not simply remove the up to the '.'? — Tim Marshall
– Tim Marshall, Commented Jan 15, 2015 at 15:20

Abdallah Arffak · Accepted Answer · 2015-01-15 15:40:22Z

1

Try this :

fileInput.change(function(){
    $this = $(this);
    var file = $this.val().split("\\");
    if(file.length)
      $('#file').text(file[file.length-1]);
})

edited Jan 15, 2015 at 15:40

answered Jan 15, 2015 at 15:28

Abdallah Arffak

1,1936 silver badges13 bronze badges

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

2 Comments

Tim Marshall Over a year ago

Just updated my Fiddle however it doesn't seem to do the job.

Abdallah Arffak Over a year ago

i update my code, you have to use this split("\\") instead of split("/");

Collectives™ on Stack Overflow

Remove users file path from my file upload input

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related