$(function () { $(".form__upload-1 a").focus(function() { $(this).closest('.form__upload-1').find('input').focus(); }); $(".form__upload-1 a").click(function() { $(this).closest('.form__upload-1').find('input').click(); }); $(".form__upload-1 span").click(function() { $(this).closest('.form__upload-1').find('input').click(); }); $(".form__upload-1 a").focus(function () { $(this).closest('.form__upload-1').addClass("focus"); }).blur(function () { $(this).closest('.form__upload-1').removeClass("focus"); }); $(".form__upload-1 input").change(function () { var file_api = ( window.File && window.FileReader && window.FileList && window.Blob ) ? true : false; console.log(this.files); var wrapper = $(this).closest('.form__upload-1'), inp = wrapper.find("input"), btn = wrapper.find("a"), lbl = wrapper.find("span"); var file_name; console.log(typeof $(this).get(0).files[0].name); if (file_api && $(this).get(0).files[0]){ file_name = $(this).get(0).files[0].name; alert(file_name); }else file_name = inp.val().replace("C:\\fakepath\\", ''); if (!file_name.length) return; if (lbl.is(":visible")) { lbl.text('('+file_name+')'); btn.text("Приложить файл"); } else btn.text(file_name); }).change(); }) ; 
 .form__upload-1 input[type="file"] { display: none; } .form-group input { width: 100%; height: 32px; border: 1px solid #d9d9d9; font-size: 14px; padding: 0 10px; } .form__upload-1 a { font-weight: 400; color: #454545; font-size: 14px; text-decoration: underline; display: inline-block; margin-right: 20px; } .form__upload-1 span { font-weight: 400; color: #979797; font-size: 12px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="form-group form__upload-1 form__upload-1_modify"><input type="hidden" name="PROPERTY[66][0]" value=""><input type="file" size="30" name="PROPERTY_FILE_66_0"><a href="#!">Приложить файл</a> <span id="66_0">(Файл не выбран)</span></div> <div class="form-group form__upload-1 form__upload-1_modify"><input type="hidden" name="PROPERTY[67][0]" value=""><input type="file" size="30" name="PROPERTY_FILE_67_0"><a href="#!">Приложить файл</a> <span id="67_0">(Файл не выбран)</span></div> <div class="form-group form__upload-1 form__upload-1_modify"><input type="hidden" name="PROPERTY[68][0]" value=""><input type="file" size="30" name="PROPERTY_FILE_68_0"><a href="#!">Приложить файл</a> <span id="68_0">(Файл не выбран)</span></div>

How to eliminate this mistake, the head broke. (did if (file_api && typeof $(this).get(0).files[0].name==null) didn't help)

  • null is not an array to get from it [0], do not do it and you will not have an error - Vyacheslav Danshin
  • @VyacheslavDanshin, did, did not help .- ( - NNN

1 answer 1

There are several flaws in the code:

  1. Hanging change handlers on all input fields, and not just on input[type="file"] , because of this, when an event is triggered on an input with a different type, this.files will be undefined .

  2. Direct call to the change method:

     $(".form__upload-1 input").change(function () { ... }).change();

    In this case, no file has been selected yet, and there is no point in starting the handler, since there is nothing to load.

After correcting these shortcomings, it is enough to add a check that at least one file is selected, for this you need to check the length property of this.files

As a result, the skin can take the following form:

 $(function() { $(".form__upload-1 a").focus(function() { $(this).closest('.form__upload-1').find('input').focus(); }); $(".form__upload-1 a").click(function() { $(this).closest('.form__upload-1').find('input').click(); }); $(".form__upload-1 span").click(function() { $(this).closest('.form__upload-1').find('input').click(); }); $(".form__upload-1 a").focus(function() { $(this).closest('.form__upload-1').addClass("focus"); }).blur(function() { $(this).closest('.form__upload-1').removeClass("focus"); }); $(".form__upload-1 input[type='file']").change(function() { if (this.files.length == 0) return; // если файлы не выбраны - выходим var file_api = (window.File && window.FileReader && window.FileList && window.Blob) ? true : false; var wrapper = $(this).closest('.form__upload-1'), inp = wrapper.find("input"), btn = wrapper.find("a"), lbl = wrapper.find("span"); var file_name; if (file_api) { file_name = $(this).get(0).files[0].name; alert(file_name); } else file_name = inp.val().replace("C:\\fakepath\\", ''); if (!file_name.length) return; if (lbl.is(":visible")) { lbl.text('(' + file_name + ')'); btn.text("Приложить файл"); } else btn.text(file_name); }); }); 
 .form__upload-1 input[type="file"] { display: none; } .form-group input { width: 100%; height: 32px; border: 1px solid #d9d9d9; font-size: 14px; padding: 0 10px; } .form__upload-1 a { font-weight: 400; color: #454545; font-size: 14px; text-decoration: underline; display: inline-block; margin-right: 20px; } .form__upload-1 span { font-weight: 400; color: #979797; font-size: 12px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="form-group form__upload-1 form__upload-1_modify"> <input type="hidden" name="PROPERTY[66][0]" value=""> <input type="file" size="30" name="PROPERTY_FILE_66_0"><a href="#!">Приложить файл</a> <span id="66_0">(Файл не выбран)</span> </div> <div class="form-group form__upload-1 form__upload-1_modify"> <input type="hidden" name="PROPERTY[67][0]" value=""> <input type="file" size="30" name="PROPERTY_FILE_67_0"><a href="#!">Приложить файл</a> <span id="67_0">(Файл не выбран)</span> </div> <div class="form-group form__upload-1 form__upload-1_modify"> <input type="hidden" name="PROPERTY[68][0]" value=""> <input type="file" size="30" name="PROPERTY_FILE_68_0"><a href="#!">Приложить файл</a> <span id="68_0">(Файл не выбран)</span> </div>

  • Thanks so much for jQuery ("# ​​attachment-file-name"). Get (0) .files [0]; , otherwise I hung on the Internet everywhere examples like "jQuery (" # attachment-file-name "). files [0];" - Gennady G