How to get the name of the file selected in the form of file downloads using JQuery?

Good evening!
There was here such problem:
In the admin panel works form for adding news.
What is the very feature:

  • After the download page appears that this form of boot image:
    <form class="news-add-form" method="POST" action="/newsmaker/addnews/" enctype="multipart/form-data">
    ....
    the <div>
     <h3 for="newsimage">
     Title image
    </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;">Upload file:</h4>
     <input type="file" name="newsimage" style="display:inline-table;" accept="image/jpeg, image/png"/>
    </div>
    
    ....
    </form>

    Where inside the "uploader"is an element showing the address of the website where the image is used. Where "filename" and here will be processed and a file name to load.


  • To ensure that the website showed the name of the file for future downloads after selecting it in the shape of a boot file written JQuery code, following the instructions on Stackoverflow and other sites:
    $(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);
    
    }

    Tested and noticed, why I don't see the name of the selected file. Revised the error console in JS, read the instructions, changed the methods that the processing was quick, and did not work;-(


Guys please help me to solve this problem and find out what wrong was done! And I will be very glad to have your help!
Thank you in advance!
March 25th 20 at 13:39
2 answers
March 25th 20 at 13:41
Solution
Guys, I solved the problem and thanks Exceptionshub for a great solution to this complex problem. The result works 100%!

So in StackOverflow and it forums incorrectly implemented the code that affect the problem?

Thank you so much!
March 25th 20 at 13:43
$("news_image") - but then the selector is not correct. Is not enough either . or #. But you in the code there is no such selector, but there is name="newsimage"
Maybe you need this:
$(document).ready(function() {
 var uf=$('[name="news_image"]');
uf.change(UploadStatus);
UploadScanUpdate();
});
I tried your example and the same problem. Yandex riffled sites with instructions about how to obtain the name of the file in the HTML text selected in form <input type="file" />using JS and JQuery. And the normal solution is not found.
@Russell_Homenick whether your options for the solution of problems getting the name of the selected file in text HTML format?
While waiting, go through with the results of Google and Bing about it... - Easter.Waters commented on March 25th 20 at 13:46
I solved the problem immediately and thanks to Bing and Microsoft for finding the best solution to the problem with the processing of the name of the selected file written in English.
Used working code that contributed to a perfect result:
$(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');

}

Thank you so much for your support! - Easter.Waters commented on March 25th 20 at 13:49

Find more questions by tags HTMLjQueryJavaScript