Bootstrap的fileinput外掛程式實現多檔案上傳的方法，bootstrapfileinput

Bootstrap的fileinput外掛程式實現多檔案上傳的方法，bootstrapfileinput

*1.bootstrap-fileinput 外掛程式git

https://github.com/kartik-v/bootstrap-fileinput.git

2.解決使用bootstrap-fileinput得到傳回值

上傳圖片

$("#file-0a").fileinput({uploadUrl : "/upload_img",//上傳圖片的urlallowedFileExtensions : [ '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);//列印出返回的jsonconsole.log(response.paths);//列印出路徑});

jsp頁面

<input id="file-0a" class="file" type="file" multipledata-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);// 一次30kbbyte[] 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外掛程式實現多檔案上傳的方法，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對幫客之家網站的支援！