Javascript file input check

Работа с Input File JS/jQuery

Сборник приёмов jQuery для работы с полями загрузки файлов через интерфейс File.

Во всех примерах используется следующий HTML код:

И поле для выбора нескольких файлов:

Очистка поля

$("#file").val(null); /* или */ document.getElementById("file").value = null;

Пример:

Проверка заполнения

if ($("#file").val() == '') < alert("Файл не выбран"); >else < alert("Файл выбран"); >/* или */ if (document.getElementById("file").value == '') < alert("Файл не выбран"); >else

Пример:

Получить количество выбранных файлов

$('#btn').click(function()< alert($("#file")[0].files.length); >); /* или */ $('#btn').click(function()< alert(document.getElementById("file").files.length); >); 

Пример:

Получить имя выбранного файла

Свойство File.name возвращает имя файла, на который ссылается объект File.

alert($("#file")[0].files[0].name); /* или */ alert(document.getElementById("file").files[0].name);

Пример:

Имена всех выбранных файлов (multiple)

let names = []; for(var i = 0; i < $("#file")[0].files.length; i++)< names.push($("#file")[0].files.item(i).name); >alert(names.join("\r\n"));

Пример:

Получить тип выбранного файла (MIME)

File.type возвращает MIMEтип файла.

alert($("#file")[0].files[0].type); /* или */ alert(document.getElementById("file").files[0].type);

Пример:

Типы всех выбранных файлов (multiple)

let names = []; for(var i = 0; i < $("#file")[0].files.length; i++)< names.push($("#file")[0].files.item(i).type); >alert(names.join("\r\n"));

Пример:

Получить размер выбранного файла

File.size возвращает размер файла в байтах.

Пример:

Размер всех выбранных файлов (multiple)

$('#btn').click(function() < let size = 0 for(var i = 0; i < $("#file")[0].files.length; i++)< size += $("#file")[0].files.item(i).type; >alert(size); >);

Пример:

Комментарии

Другие публикации

В статье приведен пример формы и php-скрипта для безопасной загрузки файлов на сервер, возможные ошибки и рекомендации при работе с данной темой.

В данной статье представлена упрощенная реализация загрузки изображений с превью через AJAX с сохранением в базу данных.

Изображения нужно сжимать для ускорения скорости загрузки сайта, но как это сделать? На многих хостингах нет.

Сборник jQuery приемов с textarea — получить содержимое, вставить значение, подсчет количества символов и строк и т.д.

Сookies или куки – это данные в виде пар ключ=значение, которые хранятся в файлах на компьютере пользователя. Для хранимых данных существуют несколько ограничений.

Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а.

Источник

How to Check If File Input is Empty with Javascript

If you have an online form on your website or web application which requires users to upload a file, validating the file input field on the client side is a good idea. In this tutorial, I will demonstrate how to use JavaScript to check whether a file input field is empty or not on form submit.

Online web forms make it possible for website visitors to send information and data to the websites they are visiting. In a way, they let the user communicate with the website by filling out some input fields and submitting it (e.g. contact forms, registration forms, settings forms, surveys, etc.). Forms are not only useful for submitting text-based information such as your name, address, email, phone or message but they are also useful for submitting files such as images, text documents or PDF reports.

Whether you are building a website, a web application or a mobile app, validating your forms is utmost important to make sure things will work as expected and to eliminate any security holes in your design. For example, making the form fields required if your form has fields that the user must not leave empty and limiting the number of characters for input fields if entering only a certain number of characters is allowed, e.g. a 10-digit phone number, are some of the things that can be done to validate a form.

Why Check File Input Fields with JavaScript?

When it comes to forms in web programming, there are two types of form validation which are implemented to ensure that the user has provided the required information and provided it in the acceptable format. The first validation type is the server-side form validation which is handled on the server after the form is submitted. The second type is the client-side form validation which is handled on the client (web browser) before the form is submitted. The server-side validation is done by a server-side programming language like PHP, Python or ASP.NET, depending on which one you are using on your project. Whereas, the client-side validation is done by a client-side scripting language like JavaScript.

In an ideal form design, you should do both validations in your code. The server-side validation will take care of the scenario where the user has blocked scripts from running on the browser (hence JS validation won’t work), and the client-side validation will take care of the validation on the browser, reducing the server load and providing quicker feedback to the user.

Reducing the server load is important because if a lot of users try to submit the form at the same time, this will cause your server to run slow or even become inaccessible for some of them. Especially if your website is hosted on cheap shared hosting, excessive use of non-optimized scripts will keep the server busier than it is really necessary and it may result in your account to get suspended, requiring you an upgrade.

In another tutorial, we covered how to check if file input is empty with PHP, which showed how to validate file input on the server side. We will now focus on the file validation on the client side.

JavaScript Check If File Input Field is Empty

Note that, our check will not deal with the file type or other things, it will just focus on whether the file input is empty or not on form submission. Also, keep in mind that this will work only on browsers where JS is enabled, which practically covers most users in the world.

We start with creating a sample HTML file, e.g. form.html. You can edit HTML files with any text editor such as Notepad, TextEdit or Notepad++.

We insert a simple form with a file input field and a submit button on our page using the following code:

You can give any name and id values to the file input element and submit button but keep in mind that you will be using those values for handling the validation and then processing the form on the server side. Also note the use of enctype attribute with a value of multipart/form-data for the form element. This attribute is required for web forms with file inputs, otherwise the form won’t work.

The above form will look like the following:

Since there’s no validation yet, the above form will submit when you click the Submit button, even if you haven’t selected any files. Though, it won’t do anything other than refreshing this page as it is just a sample form with no action.

Next, we implement the form validation via file input check using JavaScript like the following:

document.getElementById(«submit»).onclick = function(e) if (document.getElementById(«file»).value == «») e.preventDefault();
alert(«Please select a file.»);
>
>

What we did is that we assigned a function to the onclick event of the submit button, so that it will trigger when it is clicked, which means this function will run just at the instant the form is submitted, before it is sent to the server. In that function, we check the file input field’s value. If it’s empty, we prevent the form from submitting using e.preventDefault() and display a notice to the user using alert(). So, if the user tries to submit the form without selecting a file first, the form will not be submitted and a notice will be displayed.

The resulting form with JS file input validation will function like the following:

First, try submitting the form without selecting a file. You will see an alert is displayed. Then, try submitting the form after selecting a file. The form will be submitted, although in this example it will be just a page refresh.

Источник

How to check input file is empty or not using JavaScript/jQuery?

In JavaScript, while working with the form elements, we need to validate the input fields and form elements when a user enters the value. In this tutorial, we will work with the file input.

We will also learn to validate the file input. Sometimes, we may be required to check if the file is selected in the input field, then only enable the submit button; otherwise, disable the submit button. So, it will not allow users to submit the form or file without selecting it.

Validate the file input using JavaScript

In JavaScript, we can access the file input using the id, name, tag name, or class name. After that, we can check whether the file input field contains any file value. We can add the event listener to the file input for the change event. So, whenever the value of the file input changes, the event listener is invoked, and we can check whether the file input contains any file.

Syntax

Users can follow the syntax below to use JavaScript to check if the file input is empty or not.

fileInput.addEventListener("change", function () < if (fileInput.files.length == 0) < // file input is empty >else < // file is selected >>);

In the above syntax, we have added the event listener for the change event in the file input. Also, we have passed the function expression as a callback function, which checks whether any file is selected.

The file input contains the array of the file, and we can check if the length of the array is zero if any file is not uploaded to the file input.

Example

In this example, we have created the submit button. It is disabled at the start, and when the user uploads any single file, we enable the button using JavaScript. We have selected the file input by id and used the ‘files’ attribute, which is of array type, to check if any file is selected.

  
Using the JavaScript to check whether file input is empty
 
 
Submit File    

Validate the file input using jQuery

jQuery is one of the most used JavaScript libraries, which provides easy and clean syntax to write the code. We can use the jQuery with the HTML code by adding its CDN into the tag of the HTML code.

As we can access the file input in JavaScript, we can also access it in jQuery using various methods. After that, we can check the length of the ‘files’ attribute of the file input to ensure whether the file input is empty or not.

Syntax

Users can follow the syntax below to use jQuery to check if the file input contains any file

let files = $("#fileInput")[0].files.length; if (files != 0) < // file selected >else < // file not selected >

In the above syntax, we have selected the file input by its id. The ‘#’ represents the id.

Example

In the example below, we have created the validateFileInput() button, which invokes when the user clicks on the ‘click me’ button. The function selects the file input by id, checks the length of its ‘files’ attribute, and shows the validation message to the users on the screen.

    
Using jQuery to check if the file input is empty or not
 
 
 Click me    

Users learned to validate the file input using JavaScript or JQuery. In both examples, we have accessed the file input using the id. However, users can access the file input using either class name, tag name, or name and check the length of the ‘files’ attribute to ensure whether the file input is empty or any file is selected.

Источник