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