Как я могу получить имя файла seletced filename из файла?

Question

Я хотел попробовать использовать ссылку для запуска кнопки скрытого ввода, но после того, как я нажму ссылку, я хочу получить выбранный файл.

CSS

{#upload {display:none;}} 

JQuery

$(".file-image").on('click', function(e){ 
    e.preventDefault(); 
    $("#upload:hidden").trigger('click'); 
    console.log($("#upload"));    
}); 

HTML:

<a href="#" class="file-image">Add image</a>'; 
<input id="upload" type="file"/>'; 

Как я могу получить значение т он выбрал имя файла для загрузки?

В консоли я вижу, что объект как

[input#fileupload, context:document, selector: "#upload"] 
[0]: input#upload 
... 
... 

value: c:\temp\file.jpg //and this value seems to be correct 
... 

Я попытался с $("#upload")[0]['value']

Answer 1

Вы можете использовать это:

$("#upload")[0].files; 

Answer 2

Что вам нужно readAsDataURL метод FileReader() объекта ,

Это функция, которую я использовал, вы можете нарисовать refrences ...

 function readURL(input) { 

      num = jQuery(input).attr("data-opti"); 
      if (input.files && input.files[0]) { 
       var reader = new FileReader(); 
       reader.onload = function (e) { 

        jQuery('#preview' + num).attr('src', e.target.result); 
        var logoHeight = jQuery('#preview' + num).height(); 
        if (logoHeight < 104) { 
         var margintop = (104 - logoHeight)/2; 
         jQuery('#preview' + num).css('margin-top', margintop); 
        } 
       } 

       reader.readAsDataURL(input.files[0]); 
      } else { 
       // no files selected it seems 
      } 
     } 
     jQuery(".imageinput").change(function() { 
      readURL(this); 
     }); 

Это может быть использовано, чтобы показать предварительный просмотр изображения даже до того, как файл был загружен, поэтому довольно отличная функция для улучшения UX.