BootStrap上传需要用到Bootstrap-fileinput插件，有需要的可联系

先来看看bootstrap上传的界面

前台界面代码

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<link href="bootstrap-fileinput/css/bootstrap.min.css" rel="stylesheet">

<link href="bootstrap-fileinput/css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>

<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"/>

<link href="bootstrap-fileinput/themes/explorer-fa/theme.css" media="all" rel="stylesheet" type="text/css"/>

<script src="bootstrap-fileinput/js/jquery.js"></script>

<script src="bootstrap-fileinput/js/plugins/sortable.js" type="text/javascript"></script>

<script src="bootstrap-fileinput/js/fileinput.js" type="text/javascript"></script>

    <script src="bootstrap-fileinput/js/locales/fr.js" type="text/javascript"></script>

    <script src="bootstrap-fileinput/js/locales/es.js" type="text/javascript"></script>

     <script src="bootstrap-fileinput/themes/explorer-fa/theme.js" type="text/javascript"></script>

    <script src="bootstrap-fileinput/themes/fa/theme.js" type="text/javascript"></script>

    <script src="bootstrap-fileinput/js/bootstrap.min.js" type="text/javascript"></script>

    <script src="bootstrap-fileinput/js/locales/zh.js"></script>

</head>

<body>

     <form enctype="multipart/form-data" action="uploadSuccess.do" >

     <div class="container">

        <label>图片上传</label>

        <div class="file-loading">

            <input id="file-fr" name="file" type="file" multiple>

        </div>

        <!-- <hr style="border: 2px dotted">

        <label>Spanish Input</label>

            <div class="file-loading">

                <input id="file-es" name="file-es[]" type="file" multiple>

            </div> -->

           <div>

           <input type="text" id="userImage" name="userImage" value=""/>

               <input type="submit" class="btn btn-success" value="提交"></input>

           </div>

           </div>

    </form>

</body>

<script>

    $('#file-fr').fileinput({

        theme: 'fa',

        language: 'zh',

        uploadAsync: true,//异步上传

        uploadUrl: 'upload.do',

        allowedFileExtensions: ['jpg', 'png', 'gif','mp4'],

        maxFileSize:0,

        maxFileCount:10

    }).on("fileuploaded", function(event,data) { //异步上传成功结果处理

        alert(data.response.src);

    $("#userImage").val(data.response.src);

     })

</script>

</html>

二、Controller层代码

 package com.llh.controller;

 import java.io.File;

 import java.io.IOException;

 import java.util.Date;

 import java.util.Random;

 import javax.annotation.Resource;

 import javax.servlet.http.HttpServletRequest;

 import org.springframework.context.annotation.Scope;

 import org.springframework.stereotype.Controller;

 import org.springframework.web.bind.annotation.RequestMapping;

 import org.springframework.web.bind.annotation.ResponseBody;

 import org.springframework.web.multipart.MultipartFile;

 import com.llh.service.UploadService;

 /**

  *

  * @author Administrator

  *

  */

 @Controller

 @Scope("prototype")

 public class UploadController {

     @Resource

     private UploadService uploadService;

     @RequestMapping(value="upload")

     public @ResponseBody String upload(HttpServletRequest request,MultipartFile file) throws IllegalStateException, IOException{

         String name= file.getOriginalFilename();

         String path = request.getServletContext().getRealPath("/upload/");//上传保存的路径

         String fileName = changeName(name);

         String rappendix = "upload/" + fileName;

         fileName = path + "\\" + fileName;

         File file1 = new File(fileName);

         file.transferTo(file1);

         String str = "{\"src\":\"" + rappendix + "\"}";

         return str;

     }

     public static String changeName(String oldName){

         Random r = new Random();

         Date d = new Date();

         String newName = oldName.substring(oldName.indexOf('.'));

         newName = r.nextInt(99999999) + d.getTime() + newName;

         return newName;

     }

 }

Bootstrap上传图片的更多相关文章

  1. asp.net+bootstrap上传图片+FileUpload控件文件上传下载

    ps:我数据库使用的pgsql,看个人修改. 代码asp.net 的,使用了mootools框架,里面包含了bootstrap上传图片,查看预览,还加了个上传任意文件的FileUpload.(界面随便 ...

  2. 上传图片 展示进度条 bootstrap

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Bo ...

  3. php ajax bootstrap多文件上传图片预览，ajax上传文件

    <form enctype="multipart/form-data" id="upForm"> <label class="btn ...

  4. laravel5.5结合bootstrap上传插件fileinput 上传图片

    引入相关js <script src="{{ asset('bootstrap-fileinput/js/fileinput.js') }}"></script& ...

  5. JS组件系列——Bootstrap文件上传组件：bootstrap fileinput

    前言:之前的三篇介绍了下bootstrap table的一些常见用法,发现博主对这种扁平化的风格有点着迷了.前两天做一个excel导入的功能,前端使用原始的input type='file'这种标签, ...

  6. springmvc4 mybatis 整合 框架源码 bootstrap

    A集成代码生成器 [正反双向(单表.主表.明细表.树形表,开发利器)+快速构建表单 下载地址    ; freemaker模版技术 ,0个代码不用写,生成完整的一个模块,带页面.建表sql脚本,处理类 ...

  7. MVC4中基于bootstrap和HTML5的图片上传Jquery自定义控件

    场景:mvc4中上传图片,批量上传,上传前浏览,操作.图片进度条. 解决:自定义jquery控件 没有解决:非图片上传时,会有浏览样式的问题; 解决方案; 1.样式 – bootstrap 的css和 ...

  8. ASP.Net MVC3 图片上传详解（form.js,bootstrap）

    图片上传的插件很多,但很多时候还是不能切合我们的需求,我这里给大家分享个我用一个form,file实现上传四张图片的小demo.完全是用jquery前后交互,没有用插件. 最终效果图如下: 玩过花田人 ...

  9. springmvc整合mybatis框架源码 bootstrap

    A集成代码生成器 [正反双向(单表.主表.明细表.树形表,开发利器)+快速构建表单 下载地址    ; freemaker模版技术 ,0个代码不用写,生成完整的一个模块,带页面.建表sql脚本,处理类 ...

随机推荐

  1. 2018-01-19 Xtext试用: 5步实现一个(中文)JVM语言

    续上文Xtext试用: 快速实现简单领域专用语言(DSL). 基于官方教程: Five simple steps to your JVM language 达成如下语言: 它被Quan6JvmMode ...

  2. vue-cli脚手架之build文件夹上半部

    好,接下来一起分析分析配置文件^o^. build.js作用:命令npm run build的入口配置文件,主要用于生产环境. build.js中具体含义标注(vue-cli脚手架官方文件解释,大家可 ...

  3. numpy库的常用方法

    np.abs() 计算数组各元素的绝对值1 a= [0,1,2,3,4,-5,9,-3,12,-4] np.abs(a)out: array([ 0, 1, 2, 3, 4, 5, 9, 3, 12, ...

  4. 谷歌迂回入华：Waymo无人车抢先进驻上海！

    谷歌迂回入华:Waymo无人车抢先进驻上海! https://mp.weixin.qq.com/s/d5Cw2uhykMJ9urb6Cs8aNw 谷歌又双叒叕要回归中国了?这已经是第不知道多少次的传言 ...

  5. OSPF协议总结

    总结: 1.ospf协议报文不会泛洪扩散,而是逐级路由器处理后,再从所有ospf启用端口发送出去,也就是说,只能从邻居接收到ospf报文,报文的源ip是邻居的ip地址,目的ip是组播ip. 2.开启o ...

  6. loadrunner 运行脚本-Run-time Settings之Pacing设置

    运行脚本-Run-time Settings之Pacing设置 by:授客 QQ:1033553122   As soon as the previous iteration ends 前一个迭代一结 ...

  7. Kotlin入门(8)空值的判断与处理

    上一篇文章介绍了如何对循环语句进行操作,末尾还演示了发现空串时直接继续下一循环,只是在初始化字符串数组时使用了“val poem2Array:Array<String?> = ***”,该 ...

  8. Android-仿“抖音”的评论列表的UI和效果

    在design包里面 有一个 BottomSheetDialogFragment 这个Fragment,他已经帮我们处理好了手势,所以实现起来很简单.下面是代码: public class ItemL ...

  9. Vlc支持IE 360 低版本的Google浏览器

    VLC 插件代码: <object type='application/x-vlc-plugin' pluginspage="http://www.videolan.org/" ...

  10. fedora 28 , firewalld 防火墙控制，firewall-cmd 管理防火墙规则

    今天,在使用fedora时,需要修改防火墙规则,一时间忘记了命令是什么,这里进行记录一下. 目前 fedora 28/ centos 7 使用 firewalld 作为防火墙软件:下面我就怎么简单管理 ...