广告
返回顶部
首页 > 资讯 > 前端开发 > html >Bootstrap如何上传图片
  • 637
分享到

Bootstrap如何上传图片

bootstrap 2022-10-19 02:10:34 637人浏览 泡泡鱼
摘要

这篇文章主要介绍“Bootstrap如何上传图片”,在日常操作中,相信很多人在Bootstrap如何上传图片问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Bootstrap如

这篇文章主要介绍“Bootstrap如何上传图片”,在日常操作中,相信很多人在Bootstrap如何上传图片问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Bootstrap如何上传图片”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

BootStrap上传需要用到Bootstrap-fileinput插件

先来看看bootstrap上传的界面

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;


@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如何上传图片”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

--结束END--

本文标题: Bootstrap如何上传图片

本文链接: https://www.lsjlt.com/news/67445.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Bootstrap如何上传图片
    这篇文章主要介绍“Bootstrap如何上传图片”,在日常操作中,相信很多人在Bootstrap如何上传图片问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Bootstrap如...
    99+
    2022-10-19
    bootstrap
  • vue+ bootstrap如何实现图片上传图片展示功能
    这篇文章给大家分享的是有关vue+ bootstrap如何实现图片上传图片展示功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。效果图如下所示:html..... ..........
    99+
    2022-10-19
    vue bootstrap
  • vue.js如何上传图片
    这篇文章将为大家详细讲解有关vue.js如何上传图片,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。前端部分<div class="form-gr...
    99+
    2022-10-19
    vue.js
  • Django上传图片
    from django.db import models class Picture(models.Model): path = models.ImageField(upload_to='share_pictures/') ...
    99+
    2023-01-31
    上传图片 Django
  • Ajax如何实现上传图片
    这篇文章主要为大家展示了“Ajax如何实现上传图片”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Ajax如何实现上传图片”这篇文章吧。1.图片上传到服务器。2....
    99+
    2022-10-19
    ajax
  • node如何实现图片上传
    这篇文章主要介绍node如何实现图片上传,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!在web开发中,文件上传是一个很重要的问题,尤其是图片上传,以及由此延伸的“进度条”、“文件大小”、以及著名的“跨域”等问题。本d...
    99+
    2023-06-06
  • layui如何上传图片并返回图片地址
    这篇文章给大家分享的是有关layui如何上传图片并返回图片地址的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。默认是file参数名返回一个Map前端接收即可。感谢各位的阅读!关于“...
    99+
    2022-10-19
    layui
  • php如何把上传图片路径改成图片
    要将上传的图片路径改成图片,可以使用HTML的...
    99+
    2023-08-19
    php
  • selenum autoit上传图片
    目前,一般实现文件图片上传的方式都是有一个按钮,点击之后直接调用操作系统自身的弹框,选择文件后,实现上传。因为Selenium不支持调用操作系统的操作,所以这种情况下,利用Selenium无法完成图片上传,这时,我们可以选择autoit实...
    99+
    2023-01-30
    上传图片 selenum autoit
  • python django 上传图片
    安装PIL模块,如果你的电脑是windows的话,64位的下载地址为http://www.lfd.uci.edu/~gohlke/pythonlibs/ 安装命令:pip install *.whl如果你的电脑是linux的话直接下载htt...
    99+
    2023-01-31
    上传图片 python django
  • bootstrap如何让图片缩小
    在bootstrap中设置图片大小的方法:1.新建html文件,引入bootstrap;2.在文件中插入图片;3.使用width和height属性设置图片大小;具体步骤如下:首先,新建一个html文件,并在文件中引入bootstrap;&l...
    99+
    2022-10-05
    bootstrap
  • 怎么解决BootStrap Fileinput手机图片上传显示旋转问题
    这篇文章主要介绍怎么解决BootStrap Fileinput手机图片上传显示旋转问题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!最近因为项目需要用到了bootstrap file...
    99+
    2022-10-19
    bootstrap fileinput
  • H5如何实现多图片上传
    这篇文章将为大家详细讲解有关H5如何实现多图片上传,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。 这篇文章主要介绍了基于HTML5实现多张图...
    99+
    2022-10-19
    html5
  • 前端如何上传图片文件
    效果图html代码js 效果图 效果: 这篇博客必须要后台调用你的js函数,如果后台不打算调用你的js函数可以放弃此篇博客了,或者自己将代码改良。如果后台接受该代码可以参考这篇文...
    99+
    2023-09-24
    前端 javascript php
  • Android 选择图片、上传图片之PictureSelector
    集成方式 implementation 'com.github.LuckSiege.PictureSelector:picture_library:v2.2.3'     依赖...
    99+
    2022-06-06
    上传图片 选择 图片 Android
  • vue.js如何实现图片转Base64上传图片并预览
    这篇文章主要为大家展示了“vue.js如何实现图片转Base64上传图片并预览”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue.js如何实现图片转Base6...
    99+
    2022-10-19
    vue base64
  • ajax如何上传图片到PHP并压缩图片显示
    本篇内容主要讲解“ajax如何上传图片到PHP并压缩图片显示”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“ajax如何上传图片到PHP并压缩图片显示”吧!HTML代码<div i...
    99+
    2023-06-08
  • thinkphp怎么上传图片
    这篇文章主要介绍“thinkphp怎么上传图片”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“thinkphp怎么上传图片”文章能帮助大家解决问题。第一步:配置必要参数在配置文件config.php中...
    99+
    2023-07-06
  • php怎么上传图片并显示图片
    在PHP中,可以使用`$_FILES`数组来处理上传的文件。以下是一个简单的示例代码,演示了如何上传图片并显示图片:```上传图片`...
    99+
    2023-10-11
    php
  • Java如何实现图片上传至FastDFS
    这篇文章主要讲解了“Java如何实现图片上传至FastDFS”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Java如何实现图片上传至FastDFS”吧!今天来开始写图片上传的功能, 现在的图...
    99+
    2023-06-20
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作