基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)-tutorial js-php.cn

Rumah

hujung hadapan web

tutorial js

基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)

Jan 01, 2018 pm 06:35 PM

bootstrap fileinput pemalam

这篇文章主要介绍了基于bootstrap的上传插件fileinput 的ajax异步上传功能(支持多文件上传预览拖拽),非常不错，具有参考借鉴价值，对ajax上传感兴趣的朋友可以参考下基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)文章哦！

首先需要导入一些js和css文件

&lt;link href=&quot;__PUBLIC__/CSS/bootstrap.css&quot; rel=&quot;external nofollow&quot; rel=&quot;stylesheet&quot;&gt;
&lt;link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; href=&quot;__PUBLIC__/CSS/fileinput.css&quot; rel=&quot;external nofollow&quot; /&gt;
 &lt;script type=&quot;text/javascript&quot; src=&quot;__PUBLIC__/JS/bootstrap.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;__PUBLIC__/JS/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;__PUBLIC__/JS/fileinput.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;__PUBLIC__/JS/fileinput_locale_zh.js&quot;&gt;&lt;/script&gt;//中文包，不需要可以不用导入

Salin selepas log masuk

html代码

&lt;form enctype=&quot;multipart/form-data&quot;&gt;
　　&lt;input id=&quot;file-1&quot; name=&quot;file&quot; type=&quot;file&quot; multiple class=&quot;file&quot; data-overwrite-initial=&quot;false&quot; data-min-file-count=&quot;1&quot;/&gt;
&lt;/form&gt;

Salin selepas log masuk

js代码

$(&quot;#file-1&quot;).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;
　　}
});

Salin selepas log masuk

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

Salin selepas log masuk

然后进行上传，用ajax返回一个错误信息或者成功信息

直接用echo返回也行。

样式：