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

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"

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>

The simplest initialization code As follows:

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

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);
});

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!