L'entrée de fichier du plug-in de téléchargement basée sur le bootstrap implémente la fonction de téléchargement asynchrone ajax (prend en charge le glisser-déposer de l'aperçu du téléchargement de plusieurs fichiers)-js tutoriel-php.cn

L'entrée de fichier du plug-in de téléchargement basée sur le bootstrap implémente la fonction de téléchargement asynchrone ajax (prend en charge le glisser-déposer de l'aperçu du téléchargement de plusieurs fichiers)

韦小宝

Libérer： 2018-01-01 18:35:28

original

4070 Les gens l'ont consulté

Cet article présente principalement la fonction de téléchargement asynchrone d'ajax basée sur l'entrée de fichier du plug-in de téléchargement bootstrap (prend en charge le glisser-déposer de l'aperçu du téléchargement de plusieurs fichiers). Il est très bon et a une valeur de référence. Les amis intéressés par le téléchargement ajax peuvent le faire. reportez-vous au téléchargement ajax basé sur bootstrap Le plug-in de téléchargement fileinput implémente la fonction de téléchargement asynchrone ajax (prend en charge le glisser-déposer de l'aperçu du téléchargement de plusieurs fichiers) !

Vous devez d'abord importer des fichiers js et css

<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>//中文包，不需要可以不用导入

Copier après la connexion

code html

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

Copier après la connexion

code js

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

Copier après la connexion

code php

$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;];//文件的类型

Copier après la connexion

Ensuite, téléchargez, utilisez ajax pour renvoyer un message d'erreur ou un message de réussite

Vous pouvez également utiliser echo pour revenir directement.

Style :

Ce qui précède est l'ajax du fichier de plug-in de téléchargement basé sur bootstrap que l'éditeur vous présente. Fonction de téléchargement asynchrone (prend en charge le glisser-déposer de plusieurs aperçus de téléchargement de fichiers), j'espère que cela sera utile à tout le monde ! !

Recommandations associées :

Comment gérer les erreurs Ajax

Comment ajax peut-il lire le json local

Solution à soumettre deux fois en cliquant une fois pour la requête Ajax

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!