Home > Web Front-end > JS Tutorial > body text

Teach you how to use bootstrap file input to upload image files

不言
Release: 2018-10-13 15:39:52
forward
4555 people have browsed it

The content of this article is about teaching you to use bootstrap file input to upload image files. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

In projects, we often encounter the need to upload files and manage the process of uploading multiple files.

bootstrap file input component is a good solution

Project Github address: https://github.com/kartik-v/b...

Components have been developed for many years , powerful, the simplest integration method is not complicated, first download the source code:

php composer.phar require kartik-v/bootstrap-fileinput "@dev"
Copy after login

Plug-in compatible with bootstrap3/4
Introduce related files:

<!-- bootstrap 4.x is supported. You can also use the bootstrap css 3.3.x versions -->
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link href="/bootstrap-fileinput/4.4.9/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
<script src="/jquery-3.2.1.min.js"></script>
<!-- the main fileinput plugin file -->
<script src="/bootstrap-fileinput/4.4.9/js/fileinput.min.js"></script>
<!-- optionally if you need translation for your language then include  locale file as mentioned below -->
<script src="/bootstrap-fileinput/4.4.9/js/locales/(lang).js"></script>
Copy after login

The simplest initialization code As follows:

<input type="file" id="input-id" />
$("#input-id").fileinput();
Copy after login

But to achieve a basically usable state, the following configuration items need to be added:

$("#cover").fileinput({
    language: "zh",
    showCaption: false, // 不显示本地文件名
    allowedFileTypes: ['image'], // 只允许上传图片
    allowedFileExtensions: ["jpg", "jpeg", "png", "gif"], 
    uploadUrl: "{{ url('uploads/image') }}" //上传图片的服务器地址
}).on('fileuploaded', function(event, data, previewId, index){
    var response = data.response;
    $('input#coverUploader').attr('required', false);
    var input = $('<input type="hidden" name="cover" />');
    input.attr('value', response.key);
    $('form').append(input);
});
Copy after login
The above is the entire content of this article. For more bootstrap content, you can pay attention to php Chinese Net’s bootstrap tutorial.

The above is the detailed content of Teach you how to use bootstrap file input to upload image files. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:segmentfault.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template