`
itace
  • 浏览: 172211 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

文件图片上传Bootstrap Fileinput

 
阅读更多

 

 

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	String version = application.getAttribute("version").toString();
%>

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
<base href="<%=basePath%>">
<!-- release v4.4.6, copyright 2014 - 2017 Kartik Visweswaran -->
<!--suppress JSUnresolvedLibraryURL -->
    <title>upload fileinput</title>
    
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/fileinput/fileinput.css" media="all" rel="stylesheet" type="text/css"/>
    <link href="css/fileinput/themes/explorer-fa/theme.css" media="all" rel="stylesheet" type="text/css"/>
    <link href="css/font-awesome.min.css" media="all" rel="stylesheet" type="text/css"/>
    <script src="js/jquery-1.10.1.min.js"></script>
    <script src="js/fileinput/plugins/sortable.js" type="text/javascript"></script>
    <script src="js/fileinput/fileinput.js" type="text/javascript"></script>
    <script src="js/fileinput/locales/zh.js" type="text/javascript"></script>
    <script src="css/fileinput/themes/explorer-fa/theme.js" type="text/javascript"></script>
    <script src="css/fileinput/themes/fa/theme.js" type="text/javascript"></script>
    <script src="js/fileinput/popper.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
<div class="container kv-main">
    <form enctype="multipart/form-data">
        <div class="file-loading">
            <input id="kv-explorer" name="image" type="file" multiple>
        </div>
        <br>
        <button type="submit" class="btn btn-primary">Submit</button>
        <button type="reset" class="btn btn-default">Reset</button>
    </form>
</div>
</body>
<script>
    $(document).ready(function () {
        $("#kv-explorer").fileinput({
        	language: 'zh', //设置语言
            'theme': 'explorer-fa',
            'uploadUrl': '/file/uploadFilePlus.html',
            allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
            uploadAsync: true, //默认异步上传
            //showUpload:true, //是否显示上传按钮
            //showRemove :true, //显示移除按钮
            //showPreview :true, //是否显示预览
            //showCaption:false,//是否显示标题
            browseClass:"btn btn-primary", //按钮样式    
            maxFileCount:20, //表示允许同时上传的最大文件个数
            autoReplace:true,//是否自动替换当前图片，设置为true时，再次选择文件， 会将当前的文件替换掉。
            overwriteInitial: false,
            initialPreviewAsData: true,
            initialPreview: [
                "http://lorempixel.com/1920/1080/nature/1",
                "http://lorempixel.com/1920/1080/nature/2",
                "http://lorempixel.com/1920/1080/nature/3"
            ],
            initialPreviewConfig: [
                {caption: "nature-1.jpg", size: 329892, width: "120px", url: "/file/deleteFile.html", key: "a"},
                {caption: "nature-2.jpg", size: 872378, width: "120px", url: "/file/deleteFile.html", key: "b"},
                {caption: "nature-3.jpg", size: 632762, width: "120px", url: "/file/deleteFile.html", key: "c"}
            ]
        }).on("filepredelete",function(event,key){//上面3个已经加载图片的预删除
        	var abort = true;
            if (confirm("确定要删除这个文件吗？")) {
                abort = false;
            }
            return abort; // you can also send any data/object that you can receive on `filecustomerror` event
        }).on("filedeleted",function(event,data){//上面3个已经加载图片的删除后操作
        	//var result = data.response;
			//alert(result.status);
        	//alert(1);
        }).on("filesuccessremove",function(event,id){//上传成功的图片的删除操作
        	var abort = false;
            if (confirm("确定要删除这个文件吗？")) {
                abort = true;
            }
            return abort; // you can also send any data/object that you can receive on `filecustomerror` event
        }).on("fileuploaded",function(event,data){
        	//使用js的Array进行文件的添加删除管理
        	var result = data.response;
			alert(result.url);
        });
    });
</script>
<!-- 浏览器支持 http://plugins.krajee.com/file-input -->
</html>

 

 

分享到：
| session唯一登录用户
评论
2 楼 itace 2018-04-02  
toBeNumberOne123 写道
请问楼主有后台代码吗？

//普通上传
@RequestMapping(value="uploadFile.html")
public void uploadFile(HttpServletRequest request, HttpServletResponse response,
@RequestParam(value = "images", required = false) MultipartFile file) throws Exception {
response.setContentType("text/html;charset=UTF-8");
System.out.println(file.getName());
1 楼 toBeNumberOne123 2018-03-08  
请问楼主有后台代码吗？
发表评论

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

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics