0

$(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>

Как устранить сию ошибку, голову сломала. (делала if (file_api && typeof $(this).get(0).files[0].name==null) не помогло)

2
  • null это не массив что бы доставать из него [0], не делайте этого и у вас не будет ошибки 21 окт 2016 в 7:22
  • @VyacheslavDanshin , делала, не помогло.-(
    – NNN
    21 окт 2016 в 9:25

1 ответ 1

2

В коде есть несколько недочетов:

  1. Навешивание обработчиков change на все поля ввода, а не только на input[type="file"], из-за этого при срабатывании события на инпуте с другим типом this.files будет undefined.

  2. Прямой вызов метода change:

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

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

После исправления этих недочетов, достаточно добавить проверку на то, что выбран хотя бы один файл, для этого нужно проверить свойство length у this.files

В итоге, кож может принять следующий вид:

$(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>

1
  • Большое спасибо за jQuery("#attachment-file-name").get(0).files[0]; , а то я вешался, в интернете везде примеры как "jQuery("#attachment-file-name").files[0];"
    – Gennady G
    17 мар 2017 в 10:04

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.