Vous apprendre à utiliser l'entrée de fichier bootstrap pour télécharger des fichiers image

Le contenu de cet article vise à vous apprendre à utiliser l'entrée de fichier bootstrap pour télécharger des fichiers image. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Dans les projets, nous rencontrons souvent le besoin de télécharger des fichiers et de gérer le processus de téléchargement de plusieurs fichiers.

Le composant d'entrée du fichier bootstrap est une bonne solution

Adresse du projet Github : https://github.com/kartik-v/b...

Le composant a développé depuis de nombreuses années, puissant, la méthode d'intégration la plus simple n'est pas compliquée, téléchargez d'abord le code source :

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

Le plug-in est compatible avec bootstrap3/4
Présentez les fichiers associés :

<!-- 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>

La plupart du code d'initialisation simple est le suivant :

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

Mais pour obtenir un état essentiellement utilisable, les éléments de configuration suivants doivent être ajoutés :

$("#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);
});

Ce qui précède est tout le contenu de cet article, plus de bootstrap Pour le contenu, vous pouvez faire attention au tutoriel bootstrap sur le site PHP chinois.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!