支援多檔案上傳,預覽,拖拽,基於bootstrap的上傳外掛fileinput的ajax非同步上傳
首先需要匯入一些js和css檔案
<link href="__PUBLIC__/CSS/bootstrap.css" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="__PUBLIC__/CSS/fileinput.css" />
<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: '', // 必須設定個路徑進入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返回也行。
樣式:
相關文章
- bootstrap-fileinput上傳外掛試用boot
- Bootstrap檔案上傳元件應用:bootstrap fileinputboot元件
- LayUI多檔案上傳,支援歷史上傳預覽UI
- 使用fileinput上傳檔案
- 檔案上傳之三基於flash的檔案上傳
- Ajax 之檔案上傳
- Linux——拖拽上傳檔案Linux
- ajax上傳檔案的請求
- SpringMVC 單檔案上傳與多檔案上傳SpringMVC
- plupload微信檔案上傳外掛
- ajax實現檔案上傳
- HTML5拖拽檔案上傳HTML
- php檔案上傳之多檔案上傳PHP
- 支援斷點續傳的檔案上傳外掛——Huploadify-V2.0來了斷點
- perl檔案上傳程式,支援多檔案! (轉)
- laravel 多檔案上傳Laravel
- 外掛 檔案上傳外掛 ajaxfileupload.js外掛JS
- MVC檔案上傳 - 使用Request.Files上傳多個檔案MVC
- vue 本地預覽多圖上傳Vue
- bootstrap中好看的檔案上傳樣式boot
- 幾款極好的 JavaScript 檔案上傳外掛JavaScript
- jQuery+ASP.NET的AJAX檔案上傳jQueryASP.NET
- Laravel-admin 外掛中檔案上傳改為非同步上傳並設定_token 和_methodLaravel非同步
- 基於uploadify.js實現多檔案上傳和上傳進度條的顯示JS
- 單個檔案上傳和批量檔案上傳
- vue專案上傳Github預覽VueGithub
- [python][flask] Flask 圖片上傳與下載例子(支援漂亮的拖拽上傳)PythonFlask
- Django檔案上傳 -- 適用於單一小檔案上傳Django
- php多個檔案上傳PHP
- HTML5可預覽多圖片ajax上傳(使用formData傳遞資料)HTMLORM
- 檔案上傳
- 無外掛實現大檔案分片上傳,斷點續傳斷點
- 7.2、使用基於 Servlet 3.0 的檔案上傳Servlet
- 基於servlet的檔案上傳和下載Servlet
- 基於Flask開發網站 -- 前端Ajax非同步上傳檔案到後臺Flask網站前端非同步
- 上傳檔案的陷阱
- js實現帶上傳進度的檔案上傳JS
- 【Java基礎】--上傳檔案Java