浅谈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>  <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中如何上传图片

推荐信息