Javascript Detect Имя файла, выбранного для вложения в форму, и оповещение, если пользователь выбрал неправильный файл - PullRequest
Новая
       6

Javascript Detect Имя файла, выбранного для вложения в форму, и оповещение, если пользователь выбрал неправильный файл

1 голос
/ 12 марта 2012

У меня есть HTML-форма с полем ввода для загрузки файла. Я хочу, чтобы выбранный файл соответствовал нужному имени файла (mcust.csv). Если они выбирают другой файл, я хочу вызвать ошибку с JS.

Форма показана ниже: 

<form name="upload-form" id="upload-form" action="upload-information.php" enctype="multipart/form-data" method="post">

    <input type="file" name="dealers_csv" id="dealers_csv" required="required" data-message="Please attach the mcust.csv file.">

    <button type=\"submit\" name=\"Submit\" id=\"Submit\" class=\"csbutton-color upload-button\" style=\"margin-right:10px;\" >Submit files</button><img id=\"loader\" src=\"../images/loading.gif\" style=\"display:none;\"/>

</form>

После того, как пользователь присоединяет файл, я хочу определить имя файла ( mcust.csv ), и если имя файла НЕ mcust.csv , я хочу «сделать что-нибудь» (показать ошибку), используя Javascript / jQuery ПЕРЕД отправкой формы.

Вот JS: 

$(document).ready(function () {
    $("#upload-form").validator({
        position: 'top center',
        offset: [-12, 40],
        relative: true,
        accept: "csv",
        message: '<div><em></em></div>'
    })
    // make sure that mcust.csv is the attached file. If not, throw alert message
    $("input#dealers_csv").on("change", function() {
        var dealers = $("input#dealers_csv");
        var arrfilepath = dealers.val().split("\\");
        var filename = arrfilepath[arrfilepath.length - 1];
        if (filename != "mcust.csv") {
            alert("Wrong file! Please select 'mcust.csv'");
            dealers.val('');
        }
    });
    // make sure that morders.csv is the attached file. If not, throw alert message
    $("input#orders_csv").on("change", function() {
        var orders = $("input#orders_csv");
        var arrfilepath2 = orders.val().split("\\");
        var filename2 = arrfilepath2[arrfilepath2.length - 1];
        if (filename2 != "morders.csv") {
            alert("Wrong file! Please select 'morders.csv'");
            orders.val('');
        }
    });

});

РЕДАКТИРОВАТЬ: я обновил приведенный выше код до рабочей версии. Один вопрос: есть ли способ показать сообщение с данными, а не «предупреждение», если они прикрепили неправильный файл?

Ответы [ 5 ]

2 голосов
/ 12 марта 2012
  1. Отключить отправку формы HTML. В противном случае отправка HTML будет иметь приоритет над JS.
  2. Добавить событие onclick / click к кнопке отправки.
  3. Событие Click вызывает функцию, которая проверяет ваши данные.

  4. Если данные в порядке, отправьте форму с помощью JavaScript. 

    <script>
   function validate(){

    if (document.getElementById('dealers_csv').value != 'mcust.csv'){
        alert('Filename must be mcust.csv');
    }else{
        document.getElementById('upload-form').submit();
    }
 }
</script>


<form name="upload-form" id="upload-form" enctype="multipart/form-data" method="post">

   <input type="file" name="dealers_csv" id="dealers_csv">

   <input type="button" value="Submit" onclick="validate()"/>

 </form>
1 голос
/ 13 марта 2012

Я думаю, вы используете валидатор инструментов JQuery.Вот модифицированный код для проверки.

HTML 

<form name="upload-form" id="upload-form" action="upload-information.php" enctype="multipart/form-data" method="post">

<input type="file" name="dealers_csv" id="dealers_csv" required="required" filename="mcust.csv">

<button type="submit" name="Submit" id="Submit" class="csbutton-color upload-button" style="margin-right:10px;" >Submit files</button><img id="loader" src="../images/loading.gif" style="display:none;" />

</form>

Javascript 

$(document).ready(function () {

  //definfing custom validator
    $.tools.validator.fn("[filename]", function(input, value) {
        var fName = input.attr("filename"),
            regX = new RegExp('.*\\' + fName + '$');
        if (value.match(regX)) {
            return true;
        } else {
            return {
                en : "Wrong file! Please select '" + fName + "'"
            };                                
        }        
    });

   // assigning validator to file input
    $("#dealers_csv").validator({
        position: 'top center',
        offset: [-12, 40],
        relative: true,
        message: '<div><em></em></div>'
    });

    //triggering validation on change of file
    $("#dealers_csv").change(function(){
       $(this).data("validator").checkValidity();    
    });    
});

попытайтесь понять этот код и изменить его для своих нужд

1 голос
/ 12 марта 2012

Здесь ответили https://stackoverflow.com/a/651767/437226
Это проверит расширение.

Чтобы проверить имя файла без чрезмерного количества кода, поместите в скрытое поле: 

<input id="attachmentname" type="hidden" value="mcust.csv" />

Затем в правила добавьте проверку эквивалентности: 

$("#myform").validate({
  rules: {
    attachment: {
      equalTo: "#attachmentname"
    }
  }
});
1 голос
/ 12 марта 2012

Это: http://jsfiddle.net/pratik136/DpJYe/ должен ответить на ваш вопрос

РЕДАКТИРОВАТЬ: обновленная скрипка обновлена, чтобы отразить ваше требование отправки формы

0 голосов
/ 12 марта 2012

Измените свой обработчик события изменения так: 

$(document).ready(function () {
    $("#dealers_csv").change(function(){
        var dealers =$(this).val();
        if(!dealers.match(/.*\\mcust.csv$/g)){
            alert("Wrong file!" + dealers);
            this.value = "";
            return false;
        }
     });
});

Вот скрипка http://jsfiddle.net/NYwns/1/

...