`
itace
  • 浏览: 181221 次
  • 性别: 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>

 

 

分享到:
评论
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  
请问楼主有后台代码吗?

相关推荐

    bootstrapfileinput实现文件自动上传

    Bootstrap FileInput 是一个流行的前端文件上传插件,它与 Bootstrap 框架完美结合,提供了丰富的功能和美观的用户界面。这个插件不仅支持单选文件上传,还支持多选,以及预览不同类型的文件(如图片、文档、音频、...

    asp.net mvc+Bootstrap Fileinput框架实现的文件上传

    以上是关于"asp.net mvc+Bootstrap Fileinput框架实现的文件上传"的相关知识点,这个示例提供了在ASP.NET MVC环境中集成Bootstrap Fileinput进行文件上传的完整流程,对于开发者来说具有很好的参考价值。通过学习和...

    bootstrap fileinput完整插件

    Bootstrap FileInput是一款强大的文件上传组件,它为网页应用提供了美观且功能丰富的文件选择、预览和上传功能。这款插件是基于流行的前端框架Bootstrap构建,因此它可以无缝地融入Bootstrap主题,提供一致的用户...

    Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置

    在使用Bootstrap fileinput组件进行文件上传和管理时,我们可能会遇到需要在文件上传成功后同步删除服务器上旧文件的情况。本文将详细介绍如何配置Bootstrap fileinput以实现在上传新文件并移除文件预览时,触发...

    bootstrap fileinput完整实例分享

    在本文中,我们将深入探讨如何使用Bootstrap FileInput,这是一个功能强大的文件上传组件,以其美观的样式和丰富的功能而受到广泛欢迎。Bootstrap FileInput支持多种高级特性,如文件预览、AJAX同步或异步上传以及...

    Bootstrap中的fileinput 多图片上传及编辑功能

    `onchange`事件在这里用于在文件上传后触发特定的JavaScript函数`addFile(this)`。另外,还有一个隐藏的`&lt;input&gt;`字段`id="htestlogo"`,用于存储文件信息,这在编辑时可能会用到。 接着,我们了解如何获取并显示已...

    BootstrapFileInput 图片上传插件 详解

    总的来说,BootstrapFileInput是一个功能强大且易于使用的图片上传插件,它提供了丰富的特性,能够满足大部分网页文件上传的需求。通过熟练掌握其配置和事件,开发者可以轻松构建出符合用户需求的上传功能。在实际...

    BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤

    主要介绍了BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤,需要的朋友可以参考下

    22-06-23-051_BootstrapFileinput(文件上传深入理解示例)

    BootstrapFileinput是一个流行的HTML5文件上传插件,它在.NET Core框架中被广泛使用,以提供用户友好的界面和强大的文件上传功能。本示例旨在深入解析如何在.NET Core项目中集成并有效利用BootstrapFileinput组件。 ...

    bootstrap fileinput 表单上传相关资源

    Bootstrap FileInput是一款强大的文件上传组件,它为网页应用提供了美观且功能丰富的文件上传功能。这款组件基于流行的前端框架Bootstrap,可以轻松地集成到任何Bootstrap主题中,为用户提供友好的交互体验,支持多...

    bootstrap-fileinput-master(文件上传)

    Bootstrap-fileinput 是一款基于Bootstrap框架的高级文件上传插件,它极大地丰富了文件上传的样式和功能,使得在Web应用中实现美观且易用的文件上传功能变得简单易行。这款组件不仅支持单个文件上传,还允许用户一次...

    BootstrapFileInput

    BootstrapFileInput是一款流行的前端文件上传组件,尤其在与后端框架如SpringMVC结合时,可以轻松实现图片上传和预览功能。这篇文章将详细介绍如何在SpringMVC项目中利用BootstrapFileInput来创建一个高效且用户体验...

    bootstrap 文件上传组件 fileinput 实现文件批量上传

    Bootstrap文件上传组件FileInput是一款强大的前端文件上传工具,尤其适合于需要实现文件批量上传的场景。这个组件基于Bootstrap框架,提供了美观的用户界面和丰富的功能,使得文件上传操作变得直观且易于实现。以下...

    bootstrap-fileinput_demo.zip

    这个插件特别适用于处理文件上传,包括单个文件选择、多文件选择、预览、异步上传等。在"bootstrap-fileinput_demo.zip"中,我们可能找到了"bootstrap-fileinput-master"这一主目录,它包含了该插件的源代码、示例、...

    文件上传js bootstrap fileinput

    使用bootstrap的fileinput插件js,实现多文档上传。

    .net mvc5+EF6+bootstrap+fileinput,实现增删改查,多图片上传管理,纯干货zzkMvc.zip

    Fileinput是一个流行的JavaScript插件,用于处理文件上传功能。它支持多文件选择、预览、进度条显示等特性,使得文件上传操作更加直观和用户友好。在.NET MVC5和Bootstrap的基础上,fileinput插件被整合进来,实现了...

    文件上传插件bootstrap File

    这款插件充分利用了Bootstrap框架的样式,使得文件上传组件与Bootstrap主题保持一致,提供了美观的界面和实用的功能。 在Bootstrap File Input中,主要涉及以下几个关键知识点: 1. **HTML5 File API**: 这是现代...

    bootstrapfileinput.zip

    在压缩包"bootstrapfileinput.zip"中,包含的核心文件"bootstrapfileinput"可能是一个压缩后的源代码包,里面可能有CSS样式表、JavaScript脚本、图像资源以及示例代码。解压后,开发者可以将这些文件集成到自己的...

    bootstrap文件上传bootstrap-fileinput

    Bootstrap文件上传插件Bootstrap-FileInput是一款流行的前端文件上传组件,尤其在基于Bootstrap设计的项目中广泛应用。这个组件提供了一种美观、用户友好的方式来处理文件上传功能,支持多文件选择、预览、拖放操作...

Global site tag (gtag.js) - Google Analytics