淺談Bootstrap中如何上傳圖片-Bootstrap教程-PHP中文網

首頁

web前端

Bootstrap教程

淺談Bootstrap中如何上傳圖片

青灯夜游

Jun 24, 2021 am 11:47 AM

bootstrap上傳圖片

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

淺談Bootstrap中如何上傳圖片

【相关推荐：《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>
    $(&#39;#file-fr&#39;).fileinput({
        theme: &#39;fa&#39;,
        language: &#39;zh&#39;,
        uploadAsync: true,//异步上传
        uploadUrl: &#39;upload.do&#39;,
        allowedFileExtensions: [&#39;jpg&#39;, &#39;png&#39;, &#39;gif&#39;,&#39;mp4&#39;],
        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(&#39;.&#39;));
        newName = r.nextInt(99999999) + d.getTime() + newName;
        return newName;
    }

}

更多编程相关知识，请访问：编程教学！！

以上是淺談Bootstrap中如何上傳圖片的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：博客园。如有侵權，請聯絡admin@php.cn刪除

Bootstrap的目的：建立一致且有吸引力的網站Apr 19, 2025 am 12:07 AM

Bootstrap的主要用途是幫助開發者快速構建響應式、移動優先的網站。其核心功能包括：1.響應式設計，通過網格系統實現不同設備的佈局調整；2.預定義組件，如導航欄和模態框，確保美觀和跨瀏覽器兼容性；3.支持自定義和擴展，使用Sass變量和mixins調整樣式。

Bootstrap與其他框架：比較概述Apr 18, 2025 am 12:06 AM

Bootstrap優於TailwindCSS、Foundation和Bulma，因為它易用且快速開發響應式網站。 1.Bootstrap提供豐富的預定義樣式和組件庫。 2.其CSS和JavaScript庫支持響應式設計和交互功能。 3.適合快速開發，但自定義樣式可能較複雜。

在React中集成引導樣式：方法和技術Apr 17, 2025 am 12:04 AM

在React項目中整合Bootstrap可以通過兩種方法：1)使用CDN引入，適合小型項目或快速原型設計；2)使用npm包管理器安裝，適用於需要深度定制的場景。通過這些方法，你可以在React中快速構建美觀且響應式的用戶界面。

React的引導：優勢和最佳實踐Apr 16, 2025 am 12:17 AM

將Bootstrap集成到React項目中的優勢包括：1)快速開發，2)一致性和可維護性，3)響應式設計。通過直接引入CSS文件或使用React-Bootstrap庫，可以在React項目中高效使用Bootstrap的組件和样式。

Bootstrap：網絡框架的快速指南Apr 15, 2025 am 12:10 AM

Bootstrap是由Twitter開發的框架，幫助快速搭建響應式、移動優先的網站和應用。 1.易用性和豐富組件庫使開發更快。 2.龐大社區提供支持和解決方案。 3.通過CDN引入並使用類名控製樣式，如創建響應式網格。 4.可自定義樣式和擴展組件。 5.優點包括快速開發和響應式設計，缺點是樣式一致性和學習曲線。

打破bootstrap：是什麼以及為什麼重要Apr 14, 2025 am 12:05 AM

Bootstrapisafree，開放式frameworkthatsimplifiesRessiveandMobile-firstwebsitedEvelvelopment.itofferspre-styledComponentsAndAgridSystem，流化inthiningthecreationofaesthethetshethetshetshetshetshetshetshetshetshetshethetshethet interpleaseansing和Runctinctionalwebdesigns。