SpringMVC上传图片代码实例

这篇文章主要介绍了SpringMVC上传图片代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

1、前端H5

<div class="container-fluid">
    <!-- <div id="panel-advancedoptions"> -->
      <div class="row">
        <div class="col-md-12">
          <div class="panel panel-midnightblue">
            <div class="panel-heading">
              <h2>修改头像</h2>
            </div>
            <div class="panel-body">
                <div class="row">
                  <div class="col-md-1">
                    <button type="button" class="btn btn-primary btn-sm" id="btn_upload" >
                      <span class="fa fa-upload"></span> 上传头像图片
                    </button>
                  </div>
                  <div class="col-md-11">
                      <h5></h5>(仅限上传单张10M以下png、jpg图片)</h5>
                      <input type="file" class="hidden" id="InputFile" />
                  </div>
                </div>
                </br>
                <div class="row">
                  <div class="col-md-6">
                    <img src="images/UserAvatars/robo.jpg" class="img-thumbnail uploadImges" >
                  </div>
                </div>
            </div>
          </div>
        </div>
      </div>
    <!-- </div> -->
</div>

2、JS

$("#btn_upload").click(function(){
        $("#InputFile").trigger("click");
        openUploads("InputFile");
      });
      function openUploads(id){
        $("#"+id).unbind().change(function(){
          var formdata = new FormData();
          formdata.append('file',$("#"+id)[0].files[0]); //获取图片信息
          //console.log($("#"+id)[0].files[0]);
          $.ajax({
            type: 'POST',
            url: "http://localhost:8078/lifeTrackDB/UploadUserAvatars",
            data:formdata,
            cache:false,
            dataType: 'json',
            processData:false,
            contentType:false,
            success : function (result)
            {
              console.log(result);
              if (result.status)
              {
                //$('#'+id).attr('src','images/UserAvatars/'+result.message);
                alert(result.message);
              }
              else
              {
                $.alert(result.message,'');
              }
            }
          });
        });
      }

3、JAVA后台

@RequestMapping(value="/UploadUserAvatars")
@ResponseBody
public void UploadUserAvatars(HttpServletRequest request,HttpServletResponse response,
       @RequestParam(value = "file") List<MultipartFile> files) throws Exception{

    String path=System.getProperty("user.dir");

  if (null != files || 0 != files.size()) {
    for(MultipartFile file:files) {
      //System.err.println("文件名:" + file.getOriginalFilename() + "---contentType:" + file.getContentType());
      file.transferTo(new File(path+"/UserAvatars/"+file.getOriginalFilename()));
      response.getWriter().write("{\"status\": true, \"code\": \"200\",\"message\":\"上传成功\"}");
    }
    }else {
      //response.getWriter().write("handleCallback({\"status\": false, \"code\": \"200\",\"message\":\"上传失败\"})");
      response.getWriter().write("{\"status\": false, \"code\": \"200\",\"message\":\"上传失败\"}");
    }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2019-08-25

SpringMVC上传图片与访问

关于springmvc上传图片的方法小编给大家整理了两种方法,具体内容如下所示: 第一种:(放在该项目下的物理地址对应的位置) a. 路径写法: String basePath="/WEB-INF/resources/upload"; String filePathName= request.getSession().getServletContext().getRealPath(basePath);存放路径 b. 实际路径: D:\WorkSpace\.metadata\.plugi

SpringMVC框架实现上传图片的示例代码

一.创建图片虚拟目录 在上传图片之前,先要设置虚拟目录(以IDEA为例) 打开工具栏的运行配置Edit Configurations 添加物理目录和并设置虚拟目录路径 添加img图片在img文件夹内 测试访问:http://localhost:8080/img/img.jpg 二.SpringMVC上传头像 1.SpringMVC对多部件类型的解析 上传图片SpringMVC.xml配置 在页面form中提交enctype="multipart/form-data"的数据时,需要spr

webuploader+springmvc实现图片上传功能

本文为大家分享了webuploader springmvc实现图片上传的具体代码,供大家参考,具体内容如下 jsp文件 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN&qu

SpringMVC多个文件上传及上传后立即显示图片功能

多文件上传就是改良一个方法把MultipartFile类换成CommonsMultipartFile类,因为上传多个文件用数组方式的话MultipartFile类不能初始化,它不支持数组 package com.meng.upload; import java.io.File; import java.io.FileNotFoundException; import java.io.FileOutputStream; import javax.servlet.http.HttpServletRe

SpringMvc MultipartFile实现图片文件上传示例

整理文档,搜刮出一个SpringMvc MultipartFile实现图片文件上传示例,稍微整理精简一下做下分享. spring-servlet.xml <!-- SpringMVC上传文件时,需要配置MultipartResolver处理器 --> <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver&qu

SpringMVC中MultipartFile上传获取图片的宽度和高度详解

SpringMVC一般使用MultipartFile来做文件的上传,通过MultipartFile的getContentType()方法判定文件的类型(MIME) ".doc":"application/msword" ".jpg":"image/jpeg" ".jpeg":"image/jpeg" ".png":"image/png" -. 有时

WebUploader客户端批量上传图片 后台使用springMVC

本文为大家讲解了如何使用WebUploader客户端批量上传图片,供大家参考,具体内容如下 因为最近主管让用webUploader写客户端,但是在网上找了很多,能够复制就能用的并没有几个,但是经过修改后还可以,为了后面的人在需要使用到的时候可以直接copy我再此将代码和注释共享在这里. <!--需要引入的文件--> <link rel="stylesheet" type="text/css" href="../css/webuploade

使用JS+plupload直接批量上传图片到又拍云

论坛或者贴吧经常会需要分享很多图片,上传图片比较差的做法是上传到中央服务器上,中央服务器再转发给静态图片服务器.而这篇文章讲介绍如何使用plupload对上传过程进行优化,并绕过服务器直接批量上传图片到又拍云上的方法.本文集中会讲到以下几个重点: 复制代码 代码如下: plupload库 图片的本地压缩 多选图片 绕过服务器直接批量上传图片到又拍云 使用又拍的HTTP FORM API plupload的配置 plupload库 plupload是一个支持非常丰富的图片上传插件.可以对低版本的浏

详解Java实现批量压缩图片裁剪压缩多种尺寸缩略图一键批量上传图片

10万+IT人都在关注的图片批量压缩上传方案(完整案例+代码) 背景需求:为了客户端访问图片资源时,加载图片更流畅,体验更好,通常不会直接用原图路径,需要根据不同的场景显示不同规格的缩略图,根据商品关键属性,能够获取到图片不同尺寸规格的图片路径,并且能根据不同缩略图直观看到商品的关键属性,需要写一个Java小工具把本地磁盘中的图片资源一键上传至分布式FastDFS文件服务器,并把图片信息存入本地数据库,PC端或者客户端查询商品时,就可以根据商品的业务属性.比如根据productId就能把商品相关

JQuery+ajax实现批量上传图片(自写)

在网上搜索了一下,发现以jquery+ajax方式实现单张图片上传的代码是有的,但实现批量上传图片的程序却没搜索到,于是根据搜索到的代码,写了一个可以批量上传的.先看效果图 点击增加按钮,会增加一个选择框,如下图: 选择要上传的图片,效果图如下: 上传成功如下图: 下面来看代码:前台html主要代码: 复制代码 代码如下: <button id="SubUpload" class="ManagerButton" onClick="TSubmitUpl

c#批量上传图片到服务器示例分享

客户端代码: 复制代码 代码如下: /// <summary>/// 批量上传图片/// </summary>/// <param name="srcurl">服务器路径</param>/// <param name="imagesPath">图片文件夹路径</param>/// <param name="files">图片名称</param>publ

TP框架实现上传一张图片和批量上传图片的方法分析

本文实例讲述了TP框架实现上传一张图片和批量上传图片的方法.分享给大家供大家参考,具体如下: 上传一张图片 前端代码: <form action="{地址}" method="POST" enctype="multipart/form-data"> <input name="image" type="file" value="" /> <input type

PHP批量上传图片的具体实现方法介绍.

大家可以通过下面这一段代码,来具体了解PHP批量上传图片的具体方式.我们在学习PHP的时候,肯定是要从实际操作中慢慢积累经验,以巩固我们所学到的知识,逐渐的加强我们的编程水平. •PHP保护文件系统的具体代码分享•PHP保护数据库的具体代码示例•探讨主要的PHP应用领域•基于PHP的AJAX技术的具体应用解析•PHP限制上传文件大小的具体解决办法PHP批量上传图片的代码如下: 复制代码 代码如下: <html> <head><title>uploadpicturemor

php简单实现批量上传图片的方法

本文实例讲述了php简单实现批量上传图片的方法.分享给大家供大家参考,具体如下: <?php function upload_multi($path,$photo,$i){ $uploaddir = './'.$path;//文件存放目录 if(!file_exists($uploaddir))//如果目录不存在就新建 $uploaddir=mkdir($uploaddir); $piece = explode('.',$photo['name'][$i]); $uploadfile = $up

微信小程序批量上传图片到七牛(推荐)

一.引入七牛SDK 具体查看文档 https://github.com/gpake/qiniu-wxapp-sdk/blob/master/README.md 二.封装上传方法upload.js /** * 上传函数 */ const qiniuUploader = require("qiniuUploader"); const request = require("./request.js") // 初始化七牛相关参数 function initQiniu() {

Python Tornado批量上传图片并显示功能

简介 Tornado龙卷风是一个开源的网络服务器框架,它是基于社交聚合网站FriendFeed的实时信息服务开发而来的.2007年由4名Google前软件工程师一起创办了FriendFeed,旨在使用户能够方便地跟踪好友在Facebook和Twitter等多个社交网站上的活动.结果两年后,Facebook宣布收购FriendFeed,交易价格约为5000万美元.而此时FriendFeed只有12名员工.据说这帮人后来又到了Google,搞出了现在的Google App Engine... 我们开