基于bootstrap的上傳插件fileinput實(shí)現(xiàn)ajax異步上傳功能(支持多文件上傳預(yù)覽拖拽)
更新時(shí)間：2017年03月27日 17:29:34 作者：lin_zone
這篇文章主要介紹了基于bootstrap的上傳插件fileinput 的ajax異步上傳功能(支持多文件上傳預(yù)覽拖拽),非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
首先需要導(dǎo)入一些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>//中文包，不需要可以不用導(dǎo)入
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è)置個(gè)路徑進(jìn)入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'];//文件的類型
然后進(jìn)行上傳，用ajax返回一個(gè)錯(cuò)誤信息或者成功信息
直接用echo返回也行。
樣式：
以上所述是小編給大家介紹的基于bootstrap的上傳插件fileinput 的ajax異步上傳功能(支持多文件上傳預(yù)覽拖拽),希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
- Bootstrap Fileinput文件上傳組件用法詳解
- JS文件上傳神器bootstrap fileinput詳解
- Bootstrap fileinput文件上傳預(yù)覽插件使用詳解
- Bootstrap中的fileinput 多圖片上傳及編輯功能
- Bootstrap的fileinput插件實(shí)現(xiàn)多文件上傳的方法
- bootstrapfileinput實(shí)現(xiàn)文件自動(dòng)上傳
- 詳解bootstrap-fileinput文件上傳控件的親身實(shí)踐
- Bootstrap fileinput 上傳新文件移除時(shí)觸發(fā)服務(wù)器同步刪除的配置
- BootStrap fileinput.js文件上傳組件實(shí)例代碼
- Bootstrap FileInput實(shí)現(xiàn)圖片上傳功能
相關(guān)文章
一提到異步交互大家就會(huì)說ajax,仿佛ajax這個(gè)技術(shù)已經(jīng)成為了異步交互的代名詞.那下面將研究ajax的核心對象2016-01-01
這篇文章主要介紹了ajax請求添加自定義header參數(shù)代碼，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了Ajax基礎(chǔ)使用詳解，是前后臺交互的能? 也就是我們客戶端給服務(wù)端發(fā)送消息的?具，以及接受響應(yīng)的?具，本篇就來對ajax基礎(chǔ)進(jìn)行詳細(xì)講解,需要的朋友可以參考下2023-05-05
Ajax商品分類三級聯(lián)動(dòng)的簡單實(shí)現(xiàn)(案例)
下面小編就為大家?guī)硪黄狝jax商品分類三級聯(lián)動(dòng)的簡單實(shí)現(xiàn)(案例)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08
jQuery Ajax的readyState和status的區(qū)別和使用詳解
在前幾篇分析了jquery的ajax異步和同步，以及異常的一些處理，感覺還沒有把a(bǔ)jax的readyState和status說清楚.今天就來說說ajax狀態(tài)的那點(diǎn)事,非常不錯(cuò)，對ajax readystate和status區(qū)別和使用感興趣的朋友一起學(xué)習(xí)吧2017-03-03
切記ajax中要帶上AntiForgeryToken防止CSRF攻擊
在程序項(xiàng)目中經(jīng)?？吹絘jax post數(shù)據(jù)到服務(wù)器沒有加上防偽標(biāo)記，導(dǎo)致CSRF被攻擊，下面小編通過本篇文章給大家介紹ajax中要帶上AntiForgeryToken防止CSRF攻擊，感興趣的朋友一起學(xué)習(xí)吧2015-10-10
ajax本身實(shí)際上是通過XMLHttpRequest對象來進(jìn)行數(shù)據(jù)的交互，而瀏覽器出于安全考慮，不允許js代碼進(jìn)行跨域操作，會(huì)警告，所以才出現(xiàn)ajax跨域的問題。2015-10-10
基于firefox實(shí)現(xiàn)ajax圖片上傳
這篇文章主要介紹了基于firefox實(shí)現(xiàn)ajax圖片上傳，大家都知道在FF下使用ajax是件挺困難的事情，今天給大家介紹的是完美解決這個(gè)問題的方法，小伙伴可以參考下。2015-05-05
ajax實(shí)現(xiàn)的提交文章前進(jìn)行敏感詞審核的代碼
在做“文章敏感詞匯審核”功能的時(shí)候，開始在把“審核”放在插入數(shù)據(jù)庫的時(shí)候，后來想有一個(gè)功能，能在用戶點(diǎn)擊“提交”按鈕的時(shí)候，給一個(gè)提示。這樣相對“友好”那么點(diǎn)。2010-02-02
這篇文章主要介紹了Ajax跨域訪問Cookie丟失問題的解決方法,需要的朋友可以參考下2017-02-02