Maison > interface Web > js tutoriel > Comment utiliser fileinput pour implémenter le téléchargement asynchrone ajax

Comment utiliser fileinput pour implémenter le téléchargement asynchrone ajax

php中世界最好的语言
Libérer: 2018-04-02 09:50:29
original
3406 Les gens l'ont consulté

Cette fois, je vais vous montrer comment utiliser fileinput pour implémenter le téléchargement ajax asynchrone. Quelles sont les précautions pour utiliser fileinput pour implémenter le téléchargement ajax asynchrone, jetons un coup d'œil.

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: '', // 必须设置个路径进入php代码部分
  allowedFileExtensions : ['jpg', 'png','gif','txt','zip','ico','jpeg','js','css','java','mp3','mp4','doc','docx'],//允许的文件类型
  overwriteInitial: false,
  maxFileSize: 1500,//文件的最大大小 单位是k
  maxFilesNum: 10,//最多文件数量 
  // allowedFileTypes: ['image', 'video', 'flash'],
  slugCallback: function(filename) {
    return filename;
  }
});
Copier après la connexion

code php

$file=$_FILES['file'];//获取上称文件的信息,数组形式
$date['file_name'] = $file['name'];//文件的名称
$date['file_size'] = $file['size'];//文件的大小
$date['file_type'] = $file['type'];//文件的类型
Copier après la connexion

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

ou utilisez simplement echo pour le renvoyer directement.

Style :

Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour plus de passionnant. choses, veuillez faire attention à php chinois Autres articles connexes en ligne !

Lecture recommandée :

jQuery+Ajax détermine si le code de vérification saisi est réussi

Comment attribuer les balises renvoyées par Ajax Ajouter dynamiquement des styles

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal