Question

I’m trying to use the solution over at quirksmode.org to sort the file upload input inconsistency problem, using the following javascript:

$('.sidebar-uploadcv input[type=file]').attr('onchange','javascript:document.getElementById("fakeupload").value = this.value').addClass('file_input_hidden');

The trouble is, this doesn’t work properly in Chrome. It renders and the user can click to choose a file, but the filename isn’t then displayed in the #fakeupload input.

Can anyone help?

Answer 1

Found the solution by invoking .change() instead of .attr('onchange',...). This method works cross-browser.

To get rid of the fakepath string in Webkit et al I’ve also added the var filename... line to strip out that part of the file name.

$('.input[type=file]').change( function() {
    var filename = $(this).val().replace(/C:\\fakepath\\/i, '');
    $('#fakeupload').val( filename );
});