浅谈Bootstrap中如何上传图片

Bootstrap中如何上传图片？本篇文章通过示例给大家介绍一下bootstrap上传界面，并介绍一下使用Bootstrap-fileinput插件进行上传图片的方法。

【相关推荐：《bootstrap教程》】

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中如何上传图片的详细内容，更多请关注亿码酷站其它相关文章！

浅谈Bootstrap中如何上传图片
—–文章转载自PHP中文网如有侵权请联系ymkuzhan@126.com删除

转载请注明来源：浅谈Bootstrap中如何上传图片
本文永久链接地址：https://www.ymkuzhan.com/29413.html

下载声明：

本站资源如无特殊说明默认解压密码为www.ymkuzhan.com建议使用WinRAR解压；

本站资源来源于用户分享、互换、购买以及网络收集等渠道，本站不提供任何技术服务及有偿服务，资源仅提供给大家学习研究请勿作它用。

赞助本站仅为维持服务器日常运行并非购买程序及源码费用因此不提供任何技术支持，如果你喜欢该程序，请购买正版!

免责声明：

您好，本站所有资源(包括但不限于：源码、素材、工具、字体、图像、模板等)均为用户分享、互换、购买以及网络收集而来，并未取得原始权利人授权，因此禁止一切商用行为，仅可用于个人研究学习使用。请务必于下载后24小时内彻底删除，一切因下载人使用所引起的法律相关责任，包括但不限于:侵权,索赔,法律责任,刑事责任等相关责任,全部由下载人/使用人,全部承担。以上说明,一经发布视为您已全部阅读，理解、同意以上内容，如对以上内容持有异议，请勿下载，谢谢配合！支持正版，人人有责，如不慎对您的合法权益构成侵犯，请联系我们对相应内容进行删除，谢谢！