javaweb bootstrap fileinput 图片上传

最新推荐文章于 2024-03-10 23:26:08 发布

weizhiiceboy3

最新推荐文章于 2024-03-10 23:26:08 发布

阅读量898

点赞数

分类专栏： Java后台开发高级知识

本文链接：https://blog.youkuaiyun.com/weizhiiceboy3/article/details/79008417

版权

Java后台开发高级知识专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个基于Spring MVC的图片上传示例，展示了如何使用Bootstrap FileInput插件进行前端交互，并提供了完整的Java控制器代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

可参考内容 Bootstrap fileinput的图片上传 java框架基于springMVC：http://blog.youkuaiyun.com/java_chaozi/article/details/53311483

直接上代码：

package com.wangzhixuan.controller;

import org.apache.commons.io.FilenameUtils;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;
import java.util.Random;

@Controller
public class UpdatePhonoController {


    @RequestMapping("/admin/uplode/photo")
    @ResponseBody
    public Map<String, Object> updatePhoto(HttpServletRequest request, HttpServletResponse response, @RequestParam("myFile") MultipartFile myFile) {
        Map<String, Object> json = new HashMap<String, Object>();
        try {
            //输出文件后缀名称
            System.out.println(myFile.getOriginalFilename());
            DateFormat df = new SimpleDateFormat("yyyyMMddHHmmssSSS");
            //图片名称
            String name = df.format(new Date());

            Random r = new Random();
            for (int i = 0; i < 3; i++) {
                name += r.nextInt(10);
            }
            //
            String ext = FilenameUtils.getExtension(myFile.getOriginalFilename());
            //保存图片       File位置 （全路径）   /upload/fileName.jpg
            String url = request.getSession().getServletContext().getRealPath("/static/img/upload/phono/");
            //相对路径
            String path = "/" + name + "." + ext;
            File file = new File(url);
            if (!file.exists()) {
                file.mkdirs();
            }
            myFile.transferTo(new File(url + path));
            json.put("success", "/static/img/upload/phono/" + path);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return json;

    }
}

controller：

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ include file="/commons/global.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <%@ include file="/commons/basejs.jsp" %>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>


    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>boostrap可拖动文件批量上传代码 - 代码笔记</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="${staticPath }/static/tttq/bootstrapUpload/css/default.css">
    <link href="${staticPath }/static/tttq/bootstrapUpload/css/fileinput.css" media="all" rel="stylesheet" type="text/css" />
    <!--[if IE]>
    <script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
    <%--<script type="text/javascript">--%>
        <%--$(function(){--%>
            <%--alert(111111)--%>
        <%--})--%>
        <%--jQuery(document).ready(function(){--%>
            <%--alert(22222222)--%>

        <%--});--%>
        <%--function change() {--%>
            <%--$("#h22").text('2222222222');--%>
        <%--}--%>
    <%--</script>--%>
</head>
<body>
<div class="htmleaf-container">

    <div class="container kv-main">

        <form enctype="multipart/form-data">

            <div class="form-group">
                <input id="file-5"  name="myFile" class="file" type="file" multiple data-preview-file-type="any" data-upload-url="/admin/uplode/photo" data-preview-file-icon="">

            </div>
        </form>
    </div>

</div>

<script src="${staticPath }/static/tttq/bootstrapUpload/js/jquery.min.js"></script>
<script src="${staticPath }/static/tttq/bootstrapUpload/js/fileinput.js" type="text/javascript"></script>
<script src="${staticPath }/static/tttq/bootstrapUpload/js/fileinput_locale_zh.js" type="text/javascript"></script>
<script src="${staticPath }/static/tttq/bootstrapUpload/js/bootstrap.min.js" type="text/javascript"></script>
<script>
    $("#file-0").fileinput({
        'allowedFileExtensions' : ['jpg', 'png','gif'],
    });
    $("#file-1").fileinput({
        uploadUrl: '#', // you must set a valid URL here else you will get an error
        allowedFileExtensions : ['jpg', 'png','gif'],
        overwriteInitial: false,
        maxFileSize: 1000,
        maxFilesNum: 10,
        //allowedFileTypes: ['image', 'video', 'flash'],
        slugCallback: function(filename) {
            return filename.replace('(', '_').replace(']', '_');
        }
    });
    /*
     $(".file").on('fileselect', function(event, n, l) {
     alert('File Selected. Name: ' + l + ', Num: ' + n);
     });
     */
    $("#file-3").fileinput({
        showUpload: false,
        showCaption: false,
        browseClass: "btn btn-primary btn-lg",
        fileType: "any",
        previewFileIcon: "<i class='glyphicon glyphicon-king'></i>"
    });
    $("#file-4").fileinput({
        uploadExtraData: {kvId: '10'}
    });
    $(".btn-warning").on('click', function() {
        if ($('#file-4').attr('disabled')) {
            $('#file-4').fileinput('enable');
        } else {
            $('#file-4').fileinput('disable');
        }
    });
    $(".btn-info").on('click', function() {
        $('#file-4').fileinput('refresh', {previewClass:'bg-info'});
    });
    /*
     $('#file-4').on('fileselectnone', function() {
     alert('Huh! You selected no files.');
     });
     $('#file-4').on('filebrowse', function() {
     alert('File browse clicked for #file-4');
     });
     */
    $(document).ready(function() {
        $("#test-upload").fileinput({
            'showPreview' : false,
            'allowedFileExtensions' : ['jpg', 'png','gif'],
            'elErrorContainer': '#errorBlock'
        });
        /*
         $("#test-upload").on('fileloaded', function(event, file, previewId, index) {
         alert('i = ' + index + ', id = ' + previewId + ', file = ' + file.name);
         });
         */
    });
</script>

</body>
</html>