Bootstrap-fileinput外掛使用教程 支援多檔案上傳
*1.bootstrap-fileinput 外掛git下載地址
*
2.解決使用bootstrap-fileinput得到返回值
上傳圖片
$("#file-0a").fileinput({
uploadUrl : "/upload_img",//上傳圖片的url
allowedFileExtensions : [ 'jpg', 'png', 'gif' ],
overwriteInitial : false,
maxFileSize : 1000,//上傳檔案最大的尺寸
maxFilesNum : 1 ,//上傳最大的檔案數量
initialCaption: "請上傳商家logo",//文字框初始話value
//allowedFileTypes: ['image', 'video', 'flash'],
slugCallback : function(filename) {
return filename.replace('(', '_').replace(']', '_');
}
});
注意上傳圖片事件完之後,得到返回值寫法
$('#file-0a' ).on('fileuploaded', function(event, data, previewId, index) {
var form = data.form, files = data.files, extra = data.extra,
response = data.response, reader = data.reader;
console.log(response);//打印出返回的json
console.log(response.paths);//打印出路徑
});
jsp頁面
<input id="file-0a" class="file" type="file" multiple
data-min-file-count="1" name="upload_logo">
其中data-min-file-count=”1”是指檔案上傳最低數量
3.服務端程式碼
採用了spring自帶外掛上傳,框架為Springmvc
Bean
import java.util.List;
public class Picture {
private List<String> paths;
public List<String> getPaths()
{
return paths;
}
public void setPaths(List<String> paths)
{
this.paths = paths;
}
}
Controller
@ResponseBody
@RequestMapping(value="upload_img",method=RequestMethod.POST)
public Picture uploadImage(@RequestParam MultipartFile[] upload_logo) throws IOException{
log.info("上傳圖片");
Picture pic = new Picture();
List<String> paths = new ArrayList<String>();
String dir = UploadUtil.getFolder();
for(MultipartFile myfile : upload_logo){
if(myfile.isEmpty()){
log.info("檔案未上傳");
}else{
log.info("檔案長度: " + myfile.getSize());
log.info("檔案型別: " + myfile.getContentType());
log.info("檔名稱: " + myfile.getName());
log.info("檔案原名: " + myfile.getOriginalFilename());
log.info("========================================");
//上傳檔案 返回路徑
String path = UploadUtil.writeFile(myfile.getOriginalFilename(), dir, myfile.getInputStream());
log.info("檔案路徑:"+path);
paths.add(path);
}
}
pic.setPaths(paths);
return pic;
}
uploadUtil
private static final Logger log = LoggerFactory.getLogger(UploadUtil.class);
private UploadUtil() {
}
private static SimpleDateFormat fullSdf = new SimpleDateFormat("yyyyMMddHHmmssSSS");
private static SimpleDateFormat folder = new SimpleDateFormat(
"yyyy" + File.separator + "MM" + File.separator + "dd");
/**
* 返回yyyy File.separator MM File.separator dd格式的字串
*
* @return
*/
public static String getFolder() {
return folder.format(new Date());
}
/**
* 檔案上傳
*
* @param srcName
* 原檔名
* @param dirName
* 目錄名
* @param input
* 要儲存的輸入流
* @return 返回要儲存到資料庫中的路徑
*/
public static String writeFile(String srcName, String dirName, InputStream input) throws IOException {
log.info(srcName);
// 取出上傳的目錄,此目錄是tomcat的server.xml中配置的虛擬目錄
String uploadDir = ContextUtil.getSysProp("upload_dir");//設定你上傳路徑
// 取出虛擬目錄的訪問路徑
String virtualDir = ContextUtil.getSysProp("virtual_dir");//設定你虛擬目錄訪問路徑
// 重新命名檔案
if (null != srcName) {
srcName = srcName.substring(srcName.indexOf("."));
} else {
srcName = ".jpg";
}
String filename = "";
// 得到要上傳的檔案路徑
filename = uploadDir + File.separator + dirName + File.separator + fullSdf.format(new Date()) + srcName;
// 得到將要儲存到資料中的路徑
String savePath = filename.replace(uploadDir, "");
savePath = virtualDir + savePath.replace("\\", "/");
File file = new File(filename);
if (!file.getParentFile().exists()) {
file.getParentFile().mkdirs();
}
FileOutputStream fos = new FileOutputStream(file);
// 一次30kb
byte[] readBuff = new byte[1024 * 30];
int count = -1;
while ((count = input.read(readBuff, 0, readBuff.length)) != -1) {
fos.write(readBuff, 0, count);
}
fos.flush();
fos.close();
input.close();
return savePath;
}
4.解決上傳時候遇到的一些問題
如遇見點選上傳之後,進度條顯示為100%,jsp頁面顯示[Object,obejct],那麼注意你後臺返回的是否為json物件。
如遇其他問題,可以留言,博主會盡快回復。
相關推薦
Bootstrap-fileinput外掛使用教程 支援多檔案上傳
*1.bootstrap-fileinput 外掛git下載地址 * 2.解決使用bootstrap-fileinput得到返回值 上傳圖片 $("#file-0a").fileinput({ uplo
支援多檔案上傳,預覽,拖拽的基於bootstrap的上傳外掛fileinput
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <link href="path/to/css/fileinput.min.css" me
支援多檔案上傳,預覽,拖拽,基於bootstrap的上傳外掛fileinput的ajax非同步上傳
首先需要匯入一些js和css檔案 <link href="__PUBLIC__/CSS/bootstrap.css" rel="stylesheet"> <link type="text/css" rel="stylesheet" href="__
jquery ajaxFileUpload.js外掛支援多檔案上傳的方法
ajaxFileUpload是一款基於jQuery的ajax上傳方式的檔案上傳外掛,它沒有對上傳控制元件作美化(使用原生態的上傳控制元件),只是提供了非同步上傳的功能,但用它來作非同步上傳確實很簡單和方便。下來我來說說使用步驟: 一:引入JS檔案——ajaxFil
bootstrap+fileinput外掛實現可預覽上傳照片功能
圖片.png實際專案中運用:圖片.png功能:實現上傳圖片,更改上傳圖片,移除圖片的功能<!DOCTYPE html><html> <head> <metacharset="UTF-8"> <tit
bootstrap File Input 多檔案上傳外掛使用記錄(一)配置及批量同步上傳
bootstrap file input 多檔案上傳工具,功能十分強大,也很完善,我也是在接觸了這個外掛後自己研究使用的,當然也踩了很多的坑,主要是官方API是英文的,可能沒興趣一行一行的讀,只能是用到了什麼需求然後再去看對應的API說明。所以本文主要是我在使用過程中的解決
bootstrap File Input 多檔案上傳外掛使用記錄(二)刪除原檔案
在上一篇文章中,主要介紹了file input外掛的初始化和多檔案同步上傳到伺服器的相關配置等。這篇主要介紹file input外掛的編輯等。 使用場景: 在後臺管理框架中,一條資料中包含不固定的多張圖片屬性,然後需要同其他資料一起做增刪改查。多檔案同時新增上一篇已經做過了
BootStrap增強型的多檔案上傳控制元件BootStrap-FileInput
基於BootStrap專案需求一款多檔案上傳控制元件,通過篩選分析發現了BootStrap-FileInput這款控制元件(開源),能滿足大多數檔案上傳需求,簡單寫一下使用方法和遇到的坑!!專案的前後臺基本上就是使用很典型的元件 BootStrap + Spring
File Uploader:支援進度顯示與檔案拖拽的多檔案上傳前端JS指令碼
File Uploader的前身是Ajax Upload。按照官方的說法,升級到FileUploader主要是添加了一些新的特性,修正了一些比較嚴重的錯誤。但在我這個使用者看來,二者最大的不同在於:File Uploader不在基於jQuery。另外,File Upload
使用Ajaxfileupload外掛分別實現單檔案和多檔案上傳
一.Ajaxfileupload上傳檔案 首先頁面jsp程式碼:需要引入jquery和ajaxfileupload.js <head> <meta http-equiv="Content-Type" content="text/html; charset
struct2實現多檔案上傳利用ajaxfileupload.js外掛
1.前端利用ajaxfileupload.js外掛實現,原生外掛預設不支援多個檔案上傳,需要修改外掛原始碼來支援 外掛js程式碼如下 修改的原始碼為將createUploadForm函式內 //單個檔案上傳 var oldElement = jQu
jQuery.MultiFile 基於jQuery多檔案上傳外掛
jQuery.MultiFile是基於jQuery的簡單(容量也很小)的外掛,可幫助使用者很容易的選擇多個檔案進行上傳管理。 下載及使用方法:[url]http://www.fyneworks.com/jquery
Jquery外掛(uploadify外掛實現多檔案上傳)
前臺HTML程式碼: <div class="control-group" id="title-control-group"> <label class="control-label"><?=_('關於圖片(*)')?></lab
多圖片上傳,多檔案上傳。外掛diyUpload.js
// 上傳圖片 $('#test').diyUpload({ url:'server/fileupload.php', success:function( data ) { console.info( d
SpringMVC + bootstrap fileupload 多檔案上傳
最近公司的專案要用到檔案上傳,然後發現單檔案上傳還是挺簡單,但是多檔案就有點麻煩了,廢話不會說,多見諒,下面是正文: 首先在網上找到了swfUpload,個人感覺樣子不太好看,效果如下: 然後我找到了bootstrap fileupload,先看效果圖: 官網de
jquery多檔案上傳外掛 multifile的使用
aspx程式碼:<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><html xmlns="http://www.w3
js_ajax模擬form表單提交_多檔案上傳_支援單個刪除
問題:由於只有一個file上傳按鈕,在多次點選上傳按鈕時,新的files檔案會覆蓋舊的files檔案,需要使用一個變數集合儲存; 單個檔案的刪除,也需要我們對這個集合進行修改,最後使用ajax模擬form表單提交功能。 html: <section class="order-cat
Spring MVC - MultipartFile實現檔案上傳(單檔案與多檔案上傳)
前提:引入jar包。 <dependency>
相容ie8的多檔案上傳
在HTML5中,表單元素有一個新的屬性multiple,可實現多選功能。 <input type="file" multiple>這樣就可以實現多檔案上傳,但是此方法不相容ie8等低版本瀏覽器。所以專案中我使用的是百度的WebUpload外掛,此外掛在ie中底層使用flas
webupload上傳外掛中,單個檔案上傳處理
上傳外掛如何使用,我這裡就不多說了,網上大把教程。今天我要講的是如何限制上傳一個檔案,以及當檔案選擇錯誤是,再重新選擇檔案導致的問題。 預設給上傳外掛支援多檔案上傳,但是我們有很多需求是之上傳單個檔案,下面就來一起學習學習吧! 外掛html <div class="form-g