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

Question

[Сергей Золотарёв]

Добрый вечер!
Возникла вот такая проблема:
В административной панели работает форма добавления новости.
В чем сама фишка:

• 
  После загрузки страницы выводится вот такая форма загрузки изображении:
  

  <form class="news-add-form" method="POST" action="/newsmaker/addnews/" enctype="multipart/form-data">
     ....
     <div>
        <h3 for="newsimage">
          Титульное изображение
        </h3>
        <div class="uploader">
          <span class="url"><span style="color:green;">https://</span>good-adults.ru/media/images/news/uploads/<strong class="filename">...</strong></span>
        </div>
        <h4 style="text-align:left;font-size:80%;display:inline-table;text-transform: capitalize;font-family: 'Roboto Regular', Arial, Tahoma, sans-serif;">Загрузить файл:</h4>
        <input type="file" name="newsimage" style="display:inline-table;" accept="image/jpeg, image/png"/>
      </div>
  
     ....
  </form>

  
  А где внутри "uploader"-это элемент показа адреса сайта, где будет использоваться изображение. А где "filename"- и здесь будет обрабатываться и имя будущего файла для загрузки.
  
  
• 
  Для того, чтобы сайт показал имя файла для его будущей загрузки после его выбора в самой форме загрузки файлов, написал JQuery-код, следуя по инструкциям Stackoverflow и прочих сайтов:
  

  $(document).ready(function() {
    var uf=$("news_image");
    uf.change(UploadStatus);
    UploadScanUpdate();
  });
  
  function UploadStatus(){
    var fnst=$(".news-add-form > div .uploader span.url strong.filename");
    var fn;
    var file_names=[];
    for (var i=0;i < $(this).get(0).files.length;i++){
      fn+=$(this).get(0).files[i].name;
    }
    fnst.text(fn);
  
  }

  
  Протестировал и заметил, почему не показывается имя выбранного файла. Пересмотрел консоли ошибок в JS, перечитывал инструкции, менял методы, чтобы обработка действовала быстро и так и не получилось;-(
  
  

Ребята, помогите мне, пожалуйста решить эту проблему и узнайте, что не так было сделано! И я буду очень рад вашей помощи!
Заранее вам спасибо!

Answer 1

[Сергей Золотарёв]

Ребята, я решил проблему и спасибо Exceptionshub за замечательное решение этой сложной проблемы. Результат работает на 100%!

Значит в StackOverflow и ИТ-форумах неправильно реализовали код, влияющий на саму проблему?

Огромное вам спасибо!

Answer 2

[Дима Паутов]

$("news_image") - но тут селектор не правильный. Не хватает либо . либо #. Но и у вас в коде нет такого селектора, но есть name="newsimage"
Может нужно так:

$(document).ready(function() {
  var uf=$('[name="news_image"]');
  uf.change(UploadStatus);
  UploadScanUpdate();
});

Comments

[Сергей Золотарёв]

Пробовал твой пример и такая же проблема. В Яндексе перелистывал сайты с инструкциями по поводу того, как получить имя файла в тексте HTML, выбранного в форме <input type="file" />, используя JS и JQuery. И нормальных вариантов решения проблемы не нашел.
Дима Турков , есть ли твои варианты для решения проблемы с получением имени выбранного файла в текстовом HTML-формате?
Во время ожидания, перелистну результаты Гугла и Бинга по этому поводу...

[Сергей Золотарёв]

Я проблему решил сразу и спасибо Bing и Microsoft за поиск наилучшего варианта решения проблемы с обработкой имени выбранного файла, написанного на английском.
Применил работающий код, повлияющий на стопроцентный результат:

$(document).ready(function() {
  var uf=$('[type=file]');
  uf.change(UploadStatus);
});

function UploadStatus(){
  var fnst=$(".news-add-form > div .uploader span.url strong.filename");
  var fn=$('input[type=file]')[0].files[0].name; ;
  fnst.text(fn).trigger('change');

}

Огромное тебе спасибо за поддержку!