suchen

Heim >Web-Frontend >Bootstrap-Tutorial >Eine kurze Diskussion zum Hochladen von Bildern in Bootstrap

Eine kurze Diskussion zum Hochladen von Bildern in Bootstrap

青灯夜游
青灯夜游nach vorne
2021-06-24 11:47:434395Durchsuche

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

Eine kurze Diskussion zum Hochladen von Bildern in 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;
    }

}

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

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion zum Hochladen von Bildern in Bootstrap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

bootstrap
Stellungnahme：
Dieser Artikel ist reproduziert unter:cnblogs.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Eine kurze Diskussion zur Verwendung von Bootstrap Blazor-KomponentenNächster Artikel：Eine kurze Diskussion zur Verwendung von Bootstrap Blazor-Komponenten

In Verbindung stehende Artikel

Mehr sehen