<%@ 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>
文件图片上传Bootstrap Fileinput
猜你喜欢
转载自itace.iteye.com/blog/2401576
今日推荐
周排行