The upload plug-in fileinput based on bootstrap implements ajax asynchronous upload function (supports multiple file upload preview drag and drop)-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

The upload plug-in fileinput based on bootstrap implements ajax asynchronous upload function (supports multiple file upload preview drag and drop)

韦小宝

Jan 01, 2018 pm 06:35 PM

bootstrap fileinput plug-in

This article mainly introduces the asynchronous upload function of ajax based on the bootstrap upload plug-in fileinput (supports multiple file upload preview drag and drop). It is very good and has reference value. Friends who are interested in ajax upload can refer to the ajax upload based on bootstrap The upload plug-in fileinput implements ajax asynchronous upload function (supports multiple file upload preview drag and drop) article!

First you need to import some js and css files

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

Copy after login

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>

Copy after login

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;
　　}
});

Copy after login

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

Copy after login

Then upload, Use ajax to return an error message or success message

You can also directly use echo to return it.

Style:

The above is the ajax of the bootstrap-based upload plug-in fileinput introduced by the editor. Asynchronous upload function (supports drag and drop of multiple file upload previews), I hope it will be helpful to everyone! !

Related recommendations:

How to handle errors made by Ajax

How can ajax read local json

Solution to the button's Ajax request when one click is submitted twice

The above is the detailed content of The upload plug-in fileinput based on bootstrap implements ajax asynchronous upload function (supports multiple file upload preview drag and drop). For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn