Heim > Web-Frontend > js-Tutorial > Hauptteil

Das auf Bootstrap basierende Upload-Plug-in fileinput implementiert die asynchrone Ajax-Upload-Funktion (unterstützt das Hochladen mehrerer Dateien per Drag & Drop in der Vorschau).

韦小宝
Freigeben: 2018-01-01 18:35:28
Original
4012 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die asynchrone Upload-Funktion von Ajax vorgestellt, die auf der Dateieingabe des Bootstrap-Upload-Plugins basiert (unterstützt die Vorschau mehrerer Dateien per Drag & Drop. Sie ist sehr gut und hat Referenzwert.) Weitere Informationen finden Sie im Artikel zum Ajax-Upload basierend auf Bootstrap. Das Upload-Plug-in fileinput implementiert die asynchrone Ajax-Upload-Funktion (unterstützt das Hochladen mehrerer Dateien per Drag & Drop in der Vorschau)!

Zuerst müssen Sie einige JS- und CSS-Dateien importieren

<link href="__PUBLIC__/CSS/bootstrap.css" rel="external nofollow" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="__PUBLIC__/CSS/fileinput.css" rel="external nofollow" />
 <script type="text/javascript" src="__PUBLIC__/JS/bootstrap.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/JS/jquery.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/JS/fileinput.js"></script>
<script type="text/javascript" src="__PUBLIC__/JS/fileinput_locale_zh.js"></script>//中文包,不需要可以不用导入
Nach dem Login kopieren

HTML-Code

<form enctype="multipart/form-data">
  <input id="file-1" name="file" type="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="1"/>
</form>
Nach dem Login kopieren

JS-Code

$("#file-1").fileinput({
  uploadUrl: &#39;&#39;, // 必须设置个路径进入php代码部分
  allowedFileExtensions : [&#39;jpg&#39;, &#39;png&#39;,&#39;gif&#39;,&#39;txt&#39;,&#39;zip&#39;,&#39;ico&#39;,&#39;jpeg&#39;,&#39;js&#39;,&#39;css&#39;,&#39;java&#39;,&#39;mp3&#39;,&#39;mp4&#39;,&#39;doc&#39;,&#39;docx&#39;],//允许的文件类型
  overwriteInitial: false,
  maxFileSize: 1500,//文件的最大大小 单位是k
  maxFilesNum: 10,//最多文件数量 
  // allowedFileTypes: [&#39;image&#39;, &#39;video&#39;, &#39;flash&#39;],
  slugCallback: function(filename) {
    return filename;
  }
});
Nach dem Login kopieren

PHP-Code

$file=$_FILES[&#39;file&#39;];//获取上称文件的信息,数组形式
$date[&#39;file_name&#39;] = $file[&#39;name&#39;];//文件的名称
$date[&#39;file_size&#39;] = $file[&#39;size&#39;];//文件的大小
$date[&#39;file_type&#39;] = $file[&#39;type&#39;];//文件的类型
Nach dem Login kopieren

Dann hochladen, Ajax verwenden, um eine Fehlermeldung oder Erfolgsmeldung zurückzugeben

Sie können Echo auch direkt zum Zurückgeben verwenden.

Stil:

Das Obige ist die Dateieingabe des Ajax-Upload-Plugins, die auf dem vom Editor eingeführten asynchronen Upload basiert Funktion (unterstützt Drag & Drop mehrerer Datei-Upload-Vorschauen), ich hoffe, dass sie für alle hilfreich sein wird! !

Verwandte Empfehlungen:

Wie man mit Ajax-Fehlern umgeht

Wie kann Ajax lokales JSON lesen

Lösung zum zweimaligen Absenden bei einmaligem Klicken für eine Ajax-Anfrage

Das obige ist der detaillierte Inhalt vonDas auf Bootstrap basierende Upload-Plug-in fileinput implementiert die asynchrone Ajax-Upload-Funktion (unterstützt das Hochladen mehrerer Dateien per Drag & Drop in der Vorschau).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage