*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" 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插件實現多文件上傳的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！