Erfahren Sie, wie Sie die Bootstrap-Dateieingabe zum Hochladen von Bilddateien verwenden

In diesem Artikel geht es darum, Ihnen beizubringen, wie Sie die Bootstrap-Dateieingabe zum Hochladen von Bilddateien verwenden. Ich hoffe, dass er für Sie hilfreich ist.

In Projekten müssen wir häufig Dateien hochladen und den Prozess des Hochladens mehrerer Dateien verwalten.

Die Bootstrap-Dateieingabekomponente ist eine gute Lösung

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

Die Komponente hat Seit vielen Jahren entwickelt, leistungsstark, die einfachste Integrationsmethode ist nicht kompliziert. Laden Sie zuerst den Quellcode herunter:

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

Das Plug-in ist mit Bootstrap3/4 kompatibel
Führen Sie verwandte Dateien ein:

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

Der einfachste Initialisierungscode lautet wie folgt:

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

Um jedoch einen grundsätzlich verwendbaren Zustand zu erreichen, müssen die folgenden Konfigurationselemente hinzugefügt werden:

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

Das Obige ist der gesamte Inhalt dieses Artikels Bootstrap-Inhalte finden Sie im Bootstrap-Tutorial von PHP Chinese Net.

Das obige ist der detaillierte Inhalt vonErfahren Sie, wie Sie die Bootstrap-Dateieingabe zum Hochladen von Bilddateien verwenden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!