总结2:上传图片至指定服务器

1.前段页面以及JS

<!-- HTML -->
<section class="content"><div class="row"><div class="col-xs-12"><div class="box box-success"><div class="row" style="margin-top: 1%;margin-buttom: 2%;"><div class="col-lg-2"><div class="input-group" style="padding-left: 20px;"><label>城市:</label><select name="city" id="city"  style="width: 150px;"><option value="" selected="selected">--请选择--</option><option value="022">天津</option><option value="0756">深圳</option><option value="0230">重庆</option><option value="0431">长春</option><option value="0280">成都</option><option value="027">武汉</option><option value="0769">东莞</option><option value="024">沈阳</option><option value="029">西安</option><option value="0322">南京</option></select></div></div></div><div class="row" style="margin-buttom: 2%;"><div class="col-lg-3"><div class="input-group" style="padding-left: 20px;"><label>选择图片:</label><input id="file"  type="file"  style="padding-top: 4px;margin-left: 10px;"></div></div></div><div class="row" style="margin-top: 1%;margin-buttom: 2%;"><div class="col-lg-6" style="margin-left: 30px;"><div class="input-group"><span><button type="button" onclick="addShowAfter()" class="btn btn-info" id="">提交</button></span><span style="margin: 50px;"><button type="button" onclick="sec()" class="btn btn-info" id="">取消</button></span></div></div></div></div></div></section>
<!-- JS -->
function addShowAfter() {var cituNum = $("#city").val();var file = $("#file").val();if (city!='' && city!=null){if (file!='' && file!=null){var fileData = new FormData();var file = document.getElementById("file");var filObj = file.files[0];fileData.append("file",filObj);fileData.append("cituNum",cituNum);$.ajax({xhrFields: {withCredentials: true},url:"${pageContext.request.contextPath}/showAfter/uploadFile",type:'POST',contentType:false,processData:false,async:false,data:fileData,success:function (data) {if(data!='' && data !=null){alert('上传成功!');window.location.href="${pageContext.request.contextPath}/showAfter/findAll";}else{alert('上传失败!');}},error: function (data) {console.log(data);alert('上传失败!');}});} else {alert('请选择文件!');}} else {alert('请选择城市!');}
}

后端代码

package controller;import lombok.extern.slf4j.Slf4j;
import model.ShowAfter;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.commons.CommonsMultipartFile;
import service.ShowAfterService;
import util.AliyunOssUtil;
import util.FileUtil;
import util.UploadFileDto;import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.IOException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;@Slf4j
@Controller
@RequestMapping("/showAfter")
public class ShowAfterController {//    @Value("${SystemData.returnUrlHead}")private String baseUrl = "存储在服务器中的路径带域名";	// http://wzq.baidu.com/F//    @Value("${SystemData.uploadPath}")private String basePath = "存储在服务器中的路径";	// /home/upLoadFile@Autowiredprivate ShowAfterService showAfterService;/*** 上传图片*/@RequestMapping(value = "/uploadFile")@ResponseBodypublic Object getuploadFile(@RequestParam("file") CommonsMultipartFile file, String cituNum) {System.out.println(file.getOriginalFilename() + "getOriginalFilename");System.out.println(file.getContentType() + "getContentType");System.out.println(file.getSize() + "getSize");String fileUrl = null;try{fileUrl =new ShowAfterController().uploadImageFile(file);}catch (Exception e){e.printStackTrace();}System.out.println(fileUrl);ShowAfter showAfter = new ShowAfter();showAfter.setCityNum(cituNum);showAfter.setImgUrl(fileUrl);return showAfterService.addShowAfter(showAfter);}public String uploadImageFile(CommonsMultipartFile file) throws IOException {// 保存图片并生成url1String filePath = System.currentTimeMillis() + "." + "png";String httpPath = baseUrl + File.separator + "image" + File.separator + filePath;filePath = basePath + File.separator + "image" + File.separator + filePath;FileUtil.makeDirs(filePath);File newFile = new File(filePath);file.transferTo(newFile);UploadFileDto uploadFileDto = new UploadFileDto();uploadFileDto.setCode(1);uploadFileDto.setMsg("上传图片成功!");UploadFileDto.Data data = uploadFileDto.new Data();data.setSrc(httpPath);uploadFileDto.setData(data);return httpPath;}}

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/273710.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

苹果新的编程语言 Swift 语言进阶(一)--综述

Swift 是苹果开发和提供的供开发IOS 和OS X应用的一门新的语言。Swift语言基于C 和Objective-C语言&#xff0c;除了提供C 和Objective-C语言具有的所有语法功能外&#xff0c;为了编程方便和高效&#xff0c;Swift在语法上作了大量的优化和改进。 Swift采用安全编程模式&#…

总结3:IDEA中使用${pageContext.request.contextPath}填写路径时出错

问题描述&#xff1a; 之前一个项目在eclipse中开发的&#xff0c;其中有使用到 <jsp:include page"${pageContext.request.contextPath}/../head.jsp"/>启动项目成功&#xff0c;访问出错。在换到IDEA中启动项目时提示路径出错&#xff0c;当把路径修改为 …

操作12864(ST7920控制器)

引脚部分查看中文的12864介绍&#xff0c;下面这些可以在ST7920的英文数据手册里查到。 Function Description 部分介绍工作方式、存储器、操作方法。Instructions 部分介绍指令。按照并行或串行的 Timing Diagram 来操作&#xff0c;注意数据何时有效。查看初始化的流程图&…

问题之传递参数名和接收参数名要一致。

前端传递发送的Ajax请求&#xff0c;请求参数为data data: {organizationId:$("#organId").val()},//data.field 后端接受参数 //错误接受参数 RequestMapping(value "") ResponseBody public Object findAll(Integer organId) { return…

总结4:input文本输入框自动提示

1、页面效果 2、引入CSS/JS <link rel"stylesheet" href"css/jquery-ui.min.css"><script src"https://code.jquery.com/jquery-1.12.4.js"></script><script src"https://code.jquery.com/ui/1.12.1/jquery-ui.js&qu…

Map集合遍历

//创建一个map对象并赋值Map<String, String> map new HashMap<String, String>();for (int i 0; i < 10; i) {map.put("Key" i, "Value" i);}//使用keySet便利Set<String> keySet map.keySet();for (String s : keySet) {Syste…

MySql数据同步FEDERATED引擎

概要&#xff1a;FEDERATED存储引擎访问在远程数据库的表中的数据&#xff0c;而不是本地的表。这个特性给某些开发应用带来了便利&#xff0c;你可以直接在本地构建一个federated表来连接远程数据表&#xff0c;配置好了之后本地表的数据可以直接跟远程数据表同步。实际上这个…

SpringBoot 配置多数据源(Sql Server、MySql)

创建SpringBoot项目就不说了。(直接使用IDEA创建就好了) 整个目录结构如图&#xff1a;&#xff08;不用管图中报错&#xff0c;项目是在另一台电脑上写的。报错是没有jar包&#xff0c;因为网络比较慢。&#xff09; 1、主要pom.xml <dependencies><dependency>…

【SQL语句】MySql、SqlServer查询近期记录

#-------------------------MYSQL------------------------- #每小时记录 SELECT HOUR(open_time) hourNum, COUNT(1) hourCount FROM b_entrance_guard_record GROUP BY HOUR(open_time) #近六个月出入记录 SELECT MONTH(n.open_time) monthNum, COUN…

SpringBoot 记录操作日志

目录结构&#xff1a; 1、创建springboot项目&#xff0c;添加依赖。 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency><dependency><groupId>…

SpringBoot 配置记录

# 图片上传 配置图片上传大小 spring:servlet:multipart:max-file-size: 100MBmax-request-size: 100MBdatasource:#数据库文件存放 /doc/sql目录下url: jdbc:mysql://localhost:3306/merchant_pay?useUnicodetrue&characterEncodingUTF-8&autoReconnecttrue&f…

py2.7+pyqt4开发端口检测工具

py2.7pyqt4开发端口检测工具 使用工具&#xff1a;python2.7,pyqt4,pyinstaller,pywin32 先贴代码 1 import sys2 from PyQt4 import QtGui,QtCore3 4 import threading5 import thread6 import os7 import re8 import urllib9 import socket10 import time11 12 13 global max…

MySql 创建存储过程

DELIMITER $$ #以delimiter来标记用$表示存储过程结束 CREATE PROCEDURE ownerapartment() ##创建pre()存储方法 BEGIN DECLARE i INT; #定义i变量 SET i1; WHILE i<35 DO #对i的值配置INSERT INTO owner_apartment (id, owner_id,property_id, community_id, buildi…

opencv 和 parfor

一次遇到两个不熟悉的&#xff0c;因此在一起记一下。 OpenCV的全称是&#xff1a;Open Source Computer Vision Library。 OpenCv是一个基于&#xff08;开源&#xff09;发行的跨平台计算机视觉库&#xff0c;可以运行在Linux,Windows和Mac OS操作系统上。它轻量级而且高效—…

POI 导出

1.添加依赖 <dependency><groupId>org.apache.poi</groupId><artifactId>poi</artifactId><version>3.17</version></dependency> 2.POI工具类 import java.io.UnsupportedEncodingException; import javax.servlet.http.Htt…

度量空间的基本性质

收敛性 $\bf命题&#xff1a;$ 连续性 $\bf命题&#xff1a;$ 稠密性 $\bf命题&#xff1a;$设$E$为度量空间$X$中的点集&#xff0c;则$E$在$X$中稠密的充要条件是对任意的$x \in X$&#xff0c;存在点列$\left\{ {{x_n}} \right\} \subset E$&#xff0c;使得${x_n} \to x\…

@Value 注入静态变量

1、定义配置类 Component public class FilePathConfig {public static String httpResUrl;public static String savePath;public static String resUri;public String getHttpResUrl() {return httpResUrl;}Value("${file.path.httpResURL}")public void setHttpR…

配置错误定义了重复的“system.web.extensions/scripting/scriptResourceHandler” 解决办法...

今天遇到了这个问题&#xff0c; 电脑系统&#xff1a;vs2010 win7系统 iis7 我运行在iis中配置的那个网站后&#xff0c;报错&#xff1a;错误代码 0x800700b7 配置错误定义了重复的“system.web.extensions/scripting/scriptResourceHandler”节 这个问题原因在于window7的II…

Base64 四种方式的编码和解码

base64与字符串String之间的相互转换 package com.wzq;import javax.xml.bind.DatatypeConverter; import java.io.UnsupportedEncodingException; import java.util.Base64;/*** ClassName Base64Utils* Description: TODO* Author wzq* CreateDate 2019/10/14* UpdateDate 2…

邮件服务器“单点登录”功能

现状分析&#xff1a; 相信我们每个人都有这样的经历&#xff0c;比方说银行卡多的人要具体记忆每张卡的密码挺麻烦&#xff1b;现代人兴 趣广泛&#xff0c;爱好多多&#xff0c;运动健身俱乐部、娱乐游戏休闲、购物理财等各种场合少不了获得入门的“通行证”&#xff0c;要输…