浅谈Bootstrap中如何上传图片

 4749

Bootstrap中如何上传图片?本篇文章通过示例给大家介绍一下bootstrap上传界面,并介绍一下使用Bootstrap-fileinput插件进行上传图片的方法。


浅谈Bootstrap中如何上传图片


BootStrap上传需要用到Bootstrap-fileinput插件

先来看看bootstrap上传的界面


60d405afbd0eb.jpg


一、前台界面代码

  1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6. <title>Insert title here</title>
  7. <link href="bootstrap-fileinput/css/bootstrap.min.css" rel="stylesheet">
  8. <link href="bootstrap-fileinput/css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>
  9. <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" media="all" rel="stylesheet" type="text/css"/>
  10. <link href="bootstrap-fileinput/themes/explorer-fa/theme.css" media="all" rel="stylesheet" type="text/css"/>
  11. <script src="bootstrap-fileinput/js/jquery.js"></script>
  12. <script src="bootstrap-fileinput/js/plugins/sortable.js" type="text/javascript"></script>
  13. <script src="bootstrap-fileinput/js/fileinput.js" type="text/javascript"></script>
  14.     <script src="bootstrap-fileinput/js/locales/fr.js" type="text/javascript"></script>
  15.     <script src="bootstrap-fileinput/js/locales/es.js" type="text/javascript"></script>
  16.      <script src="bootstrap-fileinput/themes/explorer-fa/theme.js" type="text/javascript"></script>
  17.     <script src="bootstrap-fileinput/themes/fa/theme.js" type="text/javascript"></script>
  18.     <script src="bootstrap-fileinput/js/bootstrap.min.js" type="text/javascript"></script>
  19.     <script src="bootstrap-fileinput/js/locales/zh.js"></script>
  20. </head>
  21. <body>
  22.      <form enctype="multipart/form-data" action="uploadSuccess.do" >
  23.      <div class="container">
  24.         <label>图片上传</label>
  25.         <div class="file-loading">
  26.             <input id="file-fr" name="file" type="file" multiple>
  27.         </div>
  28.         <!-- <hr style="border: 2px dotted">
  29.         <label>Spanish Input</label>
  30.             <div class="file-loading">
  31.                 <input id="file-es" name="file-es[]" type="file" multiple>
  32.             </div> -->
  33.             <div>
  34.             <input type="text" id="userImage" name="userImage" value=""/>
  35.                 <input type="submit" class="btn btn-success" value="提交"></input>
  36.             </div>
  37.         </div>
  38.     </form>
  39. </body>
  40. <script>
  41.     $('#file-fr').fileinput({
  42.         theme: 'fa',
  43.         language: 'zh',
  44.         uploadAsync: true,//异步上传
  45.         uploadUrl: 'upload.do',
  46.         allowedFileExtensions: ['jpg', 'png', 'gif','mp4'],
  47.         maxFileSize:0,
  48.         maxFileCount:10
  49.     }).on("fileuploaded", function(event,data) { 
  50.         //异步上传成功结果处理
  51.         alert(data.response.src);
  52.         $("#userImage").val(data.response.src);
  53.     })
  54. </script>
  55. </html>


二、Controller层代码

  1. package com.llh.controller;
  2. import java.io.File;
  3. import java.io.IOException;
  4. import java.util.Date;
  5. import java.util.Random;
  6. import javax.annotation.Resource;
  7. import javax.servlet.http.HttpServletRequest;
  8. import org.springframework.context.annotation.Scope;
  9. import org.springframework.stereotype.Controller;
  10. import org.springframework.web.bind.annotation.RequestMapping;
  11. import org.springframework.web.bind.annotation.ResponseBody;
  12. import org.springframework.web.multipart.MultipartFile;
  13. import com.llh.service.UploadService;
  14. /**
  15.  *
  16.  * @author Administrator
  17.  *
  18.  */
  19. @Controller
  20. @Scope("prototype")
  21. public class UploadController {
  22.     @Resource
  23.     private UploadService uploadService;
  24.     @RequestMapping(value="upload")
  25.     public @ResponseBody String upload(HttpServletRequest request,MultipartFile file) throws IllegalStateException, IOException{
  26.         String name= file.getOriginalFilename();
  27.         String path = request.getServletContext().getRealPath("/upload/");//上传保存的路径
  28.         String fileName = changeName(name);
  29.         String rappendix = "upload/" + fileName;
  30.         fileName = path + "\\" + fileName;
  31.         File file1 = new File(fileName);
  32.         file.transferTo(file1);
  33.         String str = "{\"src\":\"" + rappendix + "\"}";
  34.         return str;
  35.     }
  36.     public static String changeName(String oldName){
  37.         Random r = new Random();
  38.         Date d = new Date();
  39.         String newName = oldName.substring(oldName.indexOf('.'));
  40.         newName = r.nextInt(99999999) + d.getTime() + newName;
  41.         return newName;
  42.     }
  43. }


本文网址:https://www.zztuku.com/detail-8968.html
站长图库 - 浅谈Bootstrap中如何上传图片
申明:如有侵犯,请 联系我们 删除。

评论(0)条

您还没有登录,请 登录 后发表评论!

提示:请勿发布广告垃圾评论,否则封号处理!!

    编辑推荐