基于bootstrap的上傳插件fileinput實現(xiàn)ajax異步上傳功能(支持多文件上傳預覽拖拽)

更新時間：2017年03月27日 17:29:34 作者：lin_zone

這篇文章主要介紹了基于bootstrap的上傳插件fileinput 的ajax異步上傳功能(支持多文件上傳預覽拖拽),非常不錯，具有參考借鑒價值，需要的朋友可以參考下

首先需要導入一些js和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>//中文包，不需要可以不用導入

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>

js代碼

$("#file-1").fileinput({
　　uploadUrl: '', // 必須設(shè)置個路徑進入php代碼部分
　　allowedFileExtensions : ['jpg', 'png','gif','txt','zip','ico','jpeg','js','css','java','mp3','mp4','doc','docx'],//允許的文件類型
　　overwriteInitial: false,
　　maxFileSize: 1500,//文件的最大大小 單位是k
　　maxFilesNum: 10,//最多文件數(shù)量 
　　// allowedFileTypes: ['image', 'video', 'flash'],
　　slugCallback: function(filename) {
　　　　return filename;
　　}
});

php代碼

$file=$_FILES['file'];//獲取上稱文件的信息，數(shù)組形式
$date['file_name'] = $file['name'];//文件的名稱
$date['file_size'] = $file['size'];//文件的大小
$date['file_type'] = $file['type'];//文件的類型

然后進行上傳，用ajax返回一個錯誤信息或者成功信息

直接用echo返回也行。

樣式：

以上所述是小編給大家介紹的基于bootstrap的上傳插件fileinput 的ajax異步上傳功能(支持多文件上傳預覽拖拽),希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

Ajax簡單的異步交互及Ajax原生編寫
一提到異步交互大家就會說ajax,仿佛ajax這個技術(shù)已經(jīng)成為了異步交互的代名詞.那下面將研究ajax的核心對象
2016-01-01
ajax請求添加自定義header參數(shù)代碼
這篇文章主要介紹了ajax請求添加自定義header參數(shù)代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
Ajax基礎(chǔ)使用詳解
這篇文章主要介紹了Ajax基礎(chǔ)使用詳解，是前后臺交互的能? 也就是我們客戶端給服務(wù)端發(fā)送消息的?具，以及接受響應(yīng)的?具，本篇就來對ajax基礎(chǔ)進行詳細講解,需要的朋友可以參考下
2023-05-05
Ajax商品分類三級聯(lián)動的簡單實現(xiàn)(案例)
下面小編就為大家?guī)硪黄狝jax商品分類三級聯(lián)動的簡單實現(xiàn)(案例)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-08-08
jQuery Ajax的readyState和status的區(qū)別和使用詳解
在前幾篇分析了jquery的ajax異步和同步，以及異常的一些處理，感覺還沒有把ajax的readyState和status說清楚.今天就來說說ajax狀態(tài)的那點事,非常不錯，對ajax readystate和status區(qū)別和使用感興趣的朋友一起學習吧
2017-03-03
切記ajax中要帶上AntiForgeryToken防止CSRF攻擊
在程序項目中經(jīng)常看到ajax post數(shù)據(jù)到服務(wù)器沒有加上防偽標記，導致CSRF被攻擊，下面小編通過本篇文章給大家介紹ajax中要帶上AntiForgeryToken防止CSRF攻擊，感興趣的朋友一起學習吧
2015-10-10
有關(guān)Ajax跨域問題的兩種解決方法
ajax本身實際上是通過XMLHttpRequest對象來進行數(shù)據(jù)的交互，而瀏覽器出于安全考慮，不允許js代碼進行跨域操作，會警告，所以才出現(xiàn)ajax跨域的問題。
2015-10-10
基于firefox實現(xiàn)ajax圖片上傳
這篇文章主要介紹了基于firefox實現(xiàn)ajax圖片上傳，大家都知道在FF下使用ajax是件挺困難的事情，今天給大家介紹的是完美解決這個問題的方法，小伙伴可以參考下。
2015-05-05
ajax實現(xiàn)的提交文章前進行敏感詞審核的代碼
在做“文章敏感詞匯審核”功能的時候，開始在把“審核”放在插入數(shù)據(jù)庫的時候，后來想有一個功能，能在用戶點擊“提交”按鈕的時候，給一個提示。這樣相對“友好”那么點。
2010-02-02
Ajax跨域訪問Cookie丟失問題的解決方法
這篇文章主要介紹了Ajax跨域訪問Cookie丟失問題的解決方法,需要的朋友可以參考下
2017-02-02