图片附件上传（前后端代码）

最新推荐文章于 2024-05-08 23:39:58 发布
最新推荐文章于 2024-05-08 23:39:58 发布
阅读量2.8k 收藏 3
点赞数 4
文章标签： 前端 jquery javascript java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rrgef/article/details/121727022
版权

 当我们需要上传一个图片或者附件时，我们必须现在前台页面获取得到该图片或者附件，然后通过异步将请求发送到后端java控制层进行业务的逻辑处理，一下就是代码实例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>添加</title>
	<#include "/common/global_css.ftl">
	<link href="${request.getContextPath()}/css/validform/style.css" rel="stylesheet" type="text/css" media="all"/>
	<link href="${request.getContextPath()}/css/chosen/chosen.css" rel="stylesheet" type="text/css"/>
	<link href="${request.getContextPath()}/css/jbox/jbox_blue.css" rel="stylesheet" type="text/css" id="jbox"/>
	<style type="text/css">
		body{margin:0px;font-size:12px;color:#999;}
		.form{overflow:auto;background:#F7F7F7;height:100%;}
	</style>
</head>
<body>
	<div class="form">
		<form class="addForm" target="_parent" id="courseAddForm" action="${request.getContextPath()}/course/course/saveCourse" method="post">
			<input type="hidden" id="pageContext" value="${request.getContextPath()}" />
			<input type="hidden" id="partnerId" name="partnerId" value="${Session.partnerId}" />
			<table border="0" cellspacing="0" cellpadding="0" width="100%" style="margin-top:20px;" class="boxTable boxmar">
			<#--  ${request.getContextPath()}/images/receive.png 初始化展示图片的样式，可以为空  -->
		            <tr>
		            	<td align="right" style="width:80px"></td>
		      			<td style="width:150px">
							 <img id="imagePathSrc1" src="${request.getContextPath()}/images/receive.png" width="180" height="150">		      				
		            	</td>
		            	<td>
	    					<div class="Validform_checktip"></div>
	    				</td>
		            </tr>
		            <tr>
		            	<td align="right" style="width:80px"><span class="check">*</span>课程图：</td>
		      			<td style="width:150px">
		      				<input type="hidden" name="courseImage" id="courseImage" class="cword" value="" />
		      				<input type="file" id="photo1">
							<input type="button"  value="上传" onclick="uploadPhotos(1)" class="btn" >
		            	</td>
		            	<td>
	    					<div class="Validform_checktip"></div>
	    				</td>
		            </tr>
		            <tr>
		            	<td align="right" style="width:80px"></td>
		      			<td style="width:150px">
							 <img id="imagePathSrc2" src="${request.getContextPath()}/images/receive.png" width="180" height="150">		      				
		            	</td>
		            	<td>
	    					<div class="Validform_checktip"></div>
	    				</td>
		            </tr>
		            <tr>
		            	<td align="right" style="width:80px"><span class="check">*</span>分享图：</td>
		      			<td style="width:150px">
		      				<input type="hidden" name="courseShareImage" id="courseShareImage" class="cword" value=""/>
		      				<input type="file" id="photo2">
							<input type="button" value="上传" onclick="uploadPhotos(2)" class="btn" >
		            	</td>
		            	<td>
	    					<div class="Validform_checktip"></div>
	    				</td>
		            </tr>
		            <tr>
		            	<td align="right" style="width:80px">课程附件：</td>
		      			<td style="width:150px">
		      				<input type="file" id="file_single"/>
		      				<input type="button"  value="上传" onclick="uploadFiles()" class="btn" >
		      			</td>
		            	<td>
	    					<div class="Validform_checktip"></div>
	    				</td>
		            </tr>
		            <tr>
		            	<td colspan="3" style="padding: 0px 80px;">
	    					<ul id="attachmentLi">
    						</ul>
	    				</td>
		            </tr>
	            <tr align="center">
    				<td colspan="3">
    					<input class="btn" type="button" id="saveBtn" value="保存">
    					<input type="button" class="btn dis cancel" id="cancelBtn" value="取消">
    				</td>
  				</tr>
	  		</table>
		</form>
	</div>
	<script type="text/javascript" src="${request.getContextPath()}/js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="${request.getContextPath()}/js/allPage.js" contextPath="${request.getContextPath()}"  id="allPageJs"></script>
	<script type="text/javascript" src="${request.getContextPath()}/js/utils/jbox/jquery.jBox.src.js"></script>
	<script type="text/javascript" src="${request.getContextPath()}/js/utils/jbox/jquery.jBox-zh-CN.js"></script>
	<script type="text/javascript" src="${request.getContextPath()}/js/utils/validform/Validform_v5.3.2.js"></script>
	<script type="text/javascript" src="${request.getContextPath()}/js/utils/chosen/chosen.jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$('#courseAddForm').Validform({
				btnSubmit:"#saveBtn", 
				tiptype:2,
				showAllError:true,
				beforeCheck:function(curform){
					//在验证成功后，表单提交前执行的函数，curform参数是当前表单对象。
					//这里明确return false的话表单将不会提交; 
					var courseType = $("input[name='courseType']:checked").val();
					var videoId = $("#videoId option:selected") .val();
				}
			});
			$('.chosen').chosen({
				"no_results_text":'未找到匹配数据!',
				"width":"120px",
				"allow_single_deselect":true
			});
			$('#cancelBtn').click(function(){
				parent.jBox.close(true);
			});
			$(".exist").css("display","none");
		});	
	 //图片上传
	 function uploadPhotos(type){
         //创建上传数据 
	     var myFormData = new FormData();
	     myFormData.append('photos',$('#photo'+type)[0].files[0]);
	     console.log($('#photo'+type)[0].files[0]);
	     var index= $('#photo'+type)[0].files[0].name.lastIndexOf(".");
		 //获取后缀
		 var ext = $('#photo'+type)[0].files[0].name.substr(index+1);
		 //图片上传仅支持JPG和PNG格式的图片
	     if(ext.toUpperCase()=='JPG'||ext.toUpperCase()=="PNG"){
		//图片的上传路径
	     var targetUrl = '${request.getContextPath()}/uploadfile/savephoto';
			$.ajax({
	            type:"post",
	            url:targetUrl,
	            data:myFormData,
	            cache: false,
	            async:false,
	            processData: false,
                contentType: false,
	            success:function(data) {
		    		var result = data;
		    		if(type==1){
			    		$("#imagePathSrc1").attr('src',data);
			    		$("#courseImage").val(data);
		    		}else if(type==2){
		    			$("#imagePathSrc2").attr('src',data);
		    		 	$("#courseShareImage").val(data);
		    		}
		    	}
		    });
		  }else{
	     	jBox.tip('请选择jpg文件或者png文件！');
			return false;
	     }
	 }
	 //上传附件
	 var i=$("#attachmentLi li").length;
	 function uploadFiles(){ 
		 if(i<10){
             //创建上传数据 
		 	 var myFormData = new FormData();
		     myFormData.append('file_single',$('#file_single')[0].files[0]);
			 //文件上传的路径
		     var targetUrl = '${request.getContextPath()}/uploadfile/uploadSingleFile';
			 $.ajax({
		           type:"post",
		           url:targetUrl,
		           data:myFormData,
		           cache: false,
		           async:false,
		           processData: false,
		           contentType: false,
		           success:function(data) {
		           		console.log(data);
		           		if(data!="false"){
				    		var result = data;
				    		var filename=$('#file_single')[0].files[0].name;
				    		var inp='<input type="hidden" name="attachmentSource['+i+'].showname" value="'+filename+'"/>';
				    		    inp+='<input type="hidden" name="attachmentSource['+i+'].href" value="'+result+'"/>';
				    		var li="<li><span>"+filename+"</span>"+inp+"</li>";
				    		$("#attachmentLi").append(li);
				    		i++;
		           		}else{
		           			jBox.tip('上传失败！');
							return false;
		           		}
			    	}
			  });
		 }else{
		 	jBox.tip('上传多个附件不可超过10个！');
			return false;
		 }
	 }
	</script>
</body>
</html>

当数据请求到Java后端时

package com.nuocai.modules.uploadfile.controller;

import java.io.File;
import java.util.UUID;

import javax.servlet.http.HttpServletRequest;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import com.nuocai.core.common.utils.upload.FileUploadConstants;
import com.nuocai.core.mybase.Constants;
//这是请求到的具体映射路径
@Controller
@RequestMapping("/uploadfile")
public class UploadController {

	@SuppressWarnings("unused")
	@RequestMapping(value = { "/savephoto" }, method = RequestMethod.POST)
	@ResponseBody
	public String addDish(@RequestParam("photos") MultipartFile file, HttpServletRequest request) throws Exception {
		String savePath = getSavePath("FILE_PATH_IMAGE");
		String path = savePath;// 文件路径
		double fileSize = file.getSize();
		byte[] sizebyte = file.getBytes();
		if (file != null) {// 判断上传的文件是否为空
			String type = null;// 文件类型
			String fileName = file.getOriginalFilename();// 文件原名称
			fileName = reFileNameByUUID(savePath, fileName);
			// 判断文件类型
			type = fileName.indexOf(".") != -1 ? fileName.substring(fileName.lastIndexOf(".") + 1, fileName.length()) : null;
			if (type != null) {// 判断文件类型是否为空
				if ("GIF".equals(type.toUpperCase()) || "PNG".equals(type.toUpperCase()) || "JPG".equals(type.toUpperCase())) {
					// 项目在容器中实际发布运行的根路径
					String realPath = request.getSession().getServletContext().getRealPath("/");
					// 自定义的文件名称
					String trueFileName = String.valueOf(System.currentTimeMillis()) + "." + type;
					// 设置存放图片文件的路径
					path = savePath + fileName;
					// 转存文件到指定的路径
					file.transferTo(new File(path));
                    //返回存放该图片的具体位置加上图片命
					return Constants.SAVE_FILE_IMAGE + fileName;
				}
			} else {
				return "false";
			}
		} else {
			return "false";
		}
		return "false";
	}
	@SuppressWarnings("unused")
	@RequestMapping(value = { "/uploadSingleFile" }, method = RequestMethod.POST)
	@ResponseBody
	public String uploadSingleFile(@RequestParam("file_single") MultipartFile file, HttpServletRequest request) throws Exception {
		String savePath = getSavePath("FILE_PATH_FILE");
		String path = savePath;// 文件路径
		double fileSize = file.getSize();
		byte[] sizebyte = file.getBytes();
		if (file != null) {// 判断上传的文件是否为空
			String type = null;// 文件类型
			String fileName = file.getOriginalFilename();// 文件原名称
			fileName = reFileNameByUUID(savePath, fileName);
			// 判断文件类型
			type = fileName.indexOf(".") != -1 ? fileName.substring(fileName.lastIndexOf(".") + 1, fileName.length()) : null;
			if (type != null) {// 判断文件类型是否为空
				if ("DOC".equals(type.toUpperCase())||"DOCX".equals(type.toUpperCase())||"XLS".equals(type.toUpperCase())||"XLSX".equals(type.toUpperCase())||"PPT".equals(type.toUpperCase())||"PPTX".equals(type.toUpperCase())||"PDF".equals(type.toUpperCase())) {
					// 项目在容器中实际发布运行的根路径
					String realPath = request.getSession().getServletContext().getRealPath("/");
					// 自定义的文件名称
					String trueFileName = String.valueOf(System.currentTimeMillis()) + "." + type;
					// 设置存放图片文件的路径
					path = savePath + fileName;
					// 转存文件到指定的路径
					file.transferTo(new File(path));
                    //返回存放该附件的具体位置加上图片命
					return Constants.SAVE_FILE_FILES + fileName;
				}
			} else {
				return "false";
			}
		} else {
			return "false";
		}
		return "false";
	}
	private static String getSavePath(String proVal) {

		if (proVal != null && proVal.equals("")) {
			proVal = "";
		}
        //获取该文件存放的具体路径
		String saveFilePath = FileUploadConstants.getPropValue(proVal);
		if (saveFilePath == null || saveFilePath.equals("")) {
			return null;
		}
		if (!saveFilePath.endsWith("/"))
			saveFilePath += "/";
		// 生成文件保存路径
		File aSaveFile = new File(saveFilePath);
		if (!aSaveFile.isDirectory())
			aSaveFile.mkdirs();
		return saveFilePath;
	}
	/**
	 * UUID命名
	 * 
	 */
	public static String reFileNameByUUID(String filePath, String fileName) {
		String uFileName = UUID.randomUUID().toString();
		uFileName = uFileName.substring(0, 8) + uFileName.substring(9, 13) + uFileName.substring(14, 18) + uFileName.substring(19, 23) + uFileName.substring(24);
		int p = fileName.lastIndexOf(".");
		fileName = uFileName + fileName.substring(p, fileName.length());
		File file = new File(filePath + fileName);
		if (file.exists()) {
			fileName = reFileNameByUUID(filePath, fileName);
		}
		return fileName;
	}

}
//这是处理业务逻辑的具体工具类
package com.nuocai.core.common.utils.upload;
import java.io.InputStream;
import java.util.Properties;

public class FileUploadConstants {
	public static String EXCELPATH_USER = "";
	
	private static Properties prop=null;
	
	static{
        //如果执行在Window操作系统中，则找到对应的配置文件所配置的具体文件的存放位置
		String path="/config/fileUploadSavePath_windows.properties";
		if(isLinux()){
            //如果执行在Liunx操作系统中，则找到对应的配置文件所配置的具体文件的存放位置
			path="/config/fileUploadSavePath_linux.properties";
		}
        //获取到输入流
		InputStream in=FileUploadConstants.class.getResourceAsStream(path);
        //如果存在该路径且流不为空，则读取配置文件
		if(in!=null){
			prop=new Properties();
			try {
				prop.load(in);
				EXCELPATH_USER=prop.getProperty("EXCELPATH_USER");
			} catch (Exception e) {
				throw new RuntimeException(e);
			}
		}
	}
	
	public static String getPropValue(String key){
        //如果执行在Window操作系统中，则找到对应的配置文件所配置的具体文件的存放位置
		String path="/config/fileupload/fileUploadSavePath_windows.properties";
		String val = null;
		if(isLinux()){
                //如果执行在Liunx操作系统中，则找到对应的配置文件所配置的具体文件的存放位置
			path="/config/fileupload/fileUploadSavePath_linux.properties";
		}
        //获取到输入流
		InputStream in=FileUploadConstants.class.getResourceAsStream(path);
        //如果存在该路径且流不为空，则读取配置文件
		if(in!=null){
			prop=new Properties();
			try {
				prop.load(in);
				val = prop.getProperty(key);
			} catch (Exception e) {
				e.printStackTrace();
			}
		}
		return val;
	}
	//判断该代码程序是否执行在Linux操作系统当中
	public  static boolean isLinux(){
		String osType = System.getProperties().getProperty("os.name").toLowerCase();
		if(osType.startsWith("windows")){
			return false;
		}
		else{
			return true;
		}
	}
}
//Window配置文件所在位置 /config/fileupload/fileUploadSavePath_windows.properties 及其内容
FILE_PATH_JS=/web/project/js_css_static/js
FILE_PATH_CSS=/web/project/js_css_static/css
FILE_PATH_IMAGE=/web/project/js_css_static/image/
FILE_PATH_ATTACHMENT=/home/project/upload/attachment
FILE_PATH_IMAGERNAME=/home/project/upload/image
FILE_PATH_FTL=/web/template
FILE_PATH_COURSEITEM=/web/importcourseitem/
FILE_PATH_EXCEL=/home/project/upload/excel
PATH_ASK_CONTENT=/web/project/js_css_static/contentImage
//Linux配置文件所在位置 /config/fileupload/fileUploadSavePath_linux.properties 及其内容
FILE_PATH_JS=e:/nuocai/js
FILE_PATH_CSS=e:/nuocai/css
FILE_PATH_IMAGE=c:/web/project/js_css_static/image/
FILE_PATH_ATTACHMENT=e:/upload/attachment
FILE_PATH_FTL=e\:/userBaseInfo
FILE_PATH_IMAGERNAME=c\:/upload/image
FILE_PATH_COURSEITEM=c\:/fileupload/importcourseitem/
FILE_PATH_EXCEL=c\:/upload/excel
PATH_ASK_CONTENT=c\:/web/project/js_css_static/contentImage
PATH_ASK_CONTENT=c\:/web/project/js_css_static/contentImage
PATH_WX_APP_image=images/WXImage
//常量类所在位置
package com.nuocai.core.mybase;

import com.nuocai.core.common.utils.upload.FileUploadConstants;
import com.nuocai.core.myutil.PropertiesLoader;


/**
 * 全局常量
 * 
 * @author zj
 * 
 */
public abstract class Constants {
	/**
     * 文件存储路径
     */
    public static final String SAVE_FILE_JS="http://static.gswldx.com/js/";
    public static final String SAVE_FILE_CSS="http://static.gswldx.com/css/";
    public static final String SAVE_FILE_IMAGE="http://static.gswldx.com/image/";
    public static final String SAVE_FILE_EXCEL="http://static.gswldx.com/upload/excel/";
    public static final String SAVE_FILE_FILES="http://static.gswldx.com/file/";
}

最后就是配置相关的nginx动静分离服务器

名字：static.gswldx.com.conf

server {
	listen       80;
	server_name  static.gswldx.com;
	access_log  static.yijian119.com.access.log;
	location / {		
		#location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|js|css)$ {
        	#        valid_referers *.wafutech.com;
                #	if ($invalid_referer) {
                #        	return 403;
                #	}
        	#}

		root   C:/web/project/js_css_static/;
		#index  index.html index.htm;
	}

}

赖皮蛇化真龙
关注
  • 4
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
springboot+vue实现超大文件分片极速上传与下载完整前后端源码
10-31
在本项目中，"springboot+vue实现超大文件分片极速上传与下载完整前后端源码"，我们探讨的是一个高效、稳定的大型文件处理方案，特别适合处理GB级别的文件。这个系统结合了Spring Boot后端框架和Vue.js前端框架，以...
java 文件上传服务器，前后台代码
11-09
在Java开发中，文件上传是常见的功能之一，尤其在构建Web应用时，如服务器需要接收用户的图片、文档等数据。本项目"java 文件上传服务器，前后台代码"提供了一个完整的解决方案，涵盖了从客户端到服务器的数据传输...
上传图片的前后端操作
热门推荐
sun_qqq的博客
10-19 1万+
一：前端 前端思路，可是使用formdata模拟form表单，使用fileReader将图片存成DataURL，上传后端。 二：后端
Spring Boot中上传图片的后端写法（简单，快捷）
zhoutu666的博客
12-13 673
文件上传
Web前端最全上传图片的前后端操作_前端上传图片到后端，web开发前景怎么样
最新发布
java_dazhuzhu的博客
05-08 1284
一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】分享一些前端面试题以及学习路线给大家Js:methods:{//上传文章缩略图});},二：后端后端任务是接收图片，返回给前端图片的存储地址。
实现图片上传（前后端）
qq_53808097的博客
07-18 401
只需在后端添加一个config类即可解决图片回显的问题。
9行代码实现图片上传和预览(自定义按钮上传)
技术圈
06-19 2263
h5原生实现，嘎嘎好用，快来copy吧。
Java实现图片上传
wuhongyuxuexi的博客
08-02 9029
实现简单图片上传至文件夹
类似QQ邮箱的js附件上传源代码
01-22
这段代码是实现一个类似QQ邮箱的JavaScript附件上传功能的示例。主要知识点包括： 1. **JavaScript事件处理**： - `onchange` 事件：当用户在`<input type="file">`元素中选择了一个文件后触发。在这个例子中，`...
基于 vue springboot 开发的前后端分离并包含用户聊天、附件管理的RABC权限后台管理系统+源代码+文档说明
11-28
1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合...
Java文件上传前后台原代码
02-09
1、利用org.apache.commons.fileupload编写的文件上传和下载的前台和后台代码，共两个例子，各有不同，非常使用。 2、另有用jspSmartupload制作一个文件上传和下载的例子，其制作的例子能够上传到数据库中。 3、注意...
图片上传代码
03-28
很好的列子，大家可以下下来学习学习.大家多指点指点。
多附件上传 代码
05-21
多附件上传 代码
图片上传源码（超详细）
09-27
图片上传源码 功能： 1、略缩图片，大中小三种 2、添加图片检测，限制图片大小 3、略缩图自动分类 4、自主设置是否添加文字水印 5、自主设置是否添加图片水印 6、自主设置水印位置 注释：功能能自行更改，注释很详细
头像上传功能前端及后台代码
04-07
基于Hbuilder做的html5app代码，及服务端代码其中weixin文件夹是服务端代码，整个内容包括：头像上传，请求队列等内容，如果读者只需要头像上传请参阅前端代码中的uploadheader.html及服务端中的com.zhenyue.net.controller.UploadController
jQuery上传图片前端代码
05-06
将图片转换成base64的字符串，可用于直接保存到数据库。
bootstrap-fileinput批量上传图片及后台代码
cocosun
04-10 907
引入css，js文件 <link th:href="@{/static/assets/js/plugins/bootstrap-fileinput/css/fileinput.css}" rel="stylesheet"> <script th:src="@{/static/assets/js/plugins/bootstrap-fileinput/js/fileinput.js}"></script <script th:src="@{/static/assets.
前端上传图片、视频等记录
sinat_20983055的博客
02-05 196
前端上传图片、视频记录
java+web自动化百度上传图片代码
weixin_53143083的博客
05-07 134
【代码】java+web自动化百度上传图片代码。
nide.js实现附件上传的前后端代码
05-30
以下是一个基于Node.js实现附件上传的前后端代码示例： 后端(Node.js)： ```javascript const express = require('express'); const fileUpload = require('express-fileupload'); const app = express(); app....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值