基于bootstrap的上傳插件fileinput實作ajax異步上傳功能(支援多檔案上傳預覽拖拽)

首先需要導入一些js和css檔案

1 2 3 4 5 6

​ ​<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代碼

7 8 9 10 11

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

php代碼

​$file=$_FILES[​ ​'file'​ ​];​ ​//擷取上稱檔案的資訊，數組形式​ ​$date[​ ​'file_name'​ ​] = $file[​ ​'name'​ ​];​ ​//檔案的名稱​ ​$date[​ ​'file_size'​ ​] = $file[​ ​'size'​ ​];​ ​//檔案的大小​ ​$date[​ ​'file_type'​ ​] = $file[​ ​'type'​ ​];​ ​//檔案的類型​

然後進行上傳，用ajax傳回一個錯誤資訊或者成功資訊

直接用echo傳回也行。

樣式：