How to upload files on bootstrap

The file upload function can be implemented through Bootstrap. The steps are as follows: introduce Bootstrap CSS and JavaScript files; create file input fields; create file upload button; handle file upload (use FormData to collect data and then send it to the server); custom style (optional).

How to upload files using Bootstrap

Bootstrap provides an intuitive and easy-to-use component that allows you to upload files in your web applications.

step:

1. Contains Bootstrap CSS and JavaScript files

Introduce the following code into your HTML page:

 <code class="html"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script></code>

2. Create file input field

Create a file input field using <input type="file"> :

 <code class="html"><input type="file" class="form-control" id="file-input"></code>

3. Create file upload button

Use <button type="submit"></button> to create a file upload button:

 <code class="html"><button type="submit" class="btn btn-primary" id="file-upload-btn">上传</button></code>

4. Process file upload

In JavaScript, FormData is used to collect the submitted data and then send it to the server for processing. The following is the sample code:

 <code class="javascript">const form = document.getElementById('file-form'); form.addEventListener('submit', (event) => { event.preventDefault(); // 创建FormData 对象const formData = new FormData(form); // 发送文件上传请求fetch('/upload', { method: 'POST', body: formData }) .then(response => { // 处理响应}) .catch(error => { // 处理错误}); });</code>

5. Custom style (optional)

Bootstrap provides predefined styles, but you can also customize the styles to match the appearance of your application. For example, you can modify the style of the file input field:

 <code class="css">#file-input { width: 200px; }</code>

By following these steps, you can easily implement file upload functionality with Bootstrap, allowing your web application to handle file upload requests.

The above is the detailed content of How to upload files on bootstrap. For more information, please follow other related articles on the PHP Chinese website!