formdata用法

已于 2022-09-17 20:00:53 修改
阅读量289 收藏
点赞数
分类专栏： 前端 文章标签： javascript servlet 前端
于 2018-12-16 13:22:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41477928/article/details/85034473
版权

FormData Ajax上传文件详细教程_兰亭古墨的博客-CSDN博客

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>文件上传</title>
		<script src="js/jquery-1.6.min.js" type="text/javascript"> </script>
	</head>
	<body>
		<form>
			<label class="aui-label-control"> 身份证号 </label>
			<input type="text" name="cardnum" id="cardnum">

			<label class="aui-label-control"> age </label>
			<input type="text" name="age" id="age">

			<label class="aui-label-control"> sex </label>
			<input type="text" name="sex" id="sex">

			<input type="file" name="file" id="file" />
		</form>
		<button id="post" onclick="clicks()">提交上传</button>
		<script>
			function clicks() {
				console.log($("#cardnum").val());
				console.log($("#age").val());
				var formData = new FormData();
				var cardnum = $("#cardnum").val();
				var age = $("#age").val();
				var sex = $("#sex").val();
				var file = $("#file")[0].files[0];
				if (file != "") {
					formData.append("file", file);
				}
				formData.append("cardnum", cardnum);
				formData.append("age", age);
				formData.append("sex", sex);
				$.ajax({
					type: "POST",
					url: "http://127.0.0.1:8080/xueji/insertstudents",
					data: formData,
					cache: false,
					processData: false,
					contentType: false,
					success: function(data) {
						console.log(data);
					}
				});
			}
		</script>
	</body>

</html>

后端

package com.xueji.controller;

import java.io.IOException;
import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.propertyeditors.CustomDateEditor;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.WebDataBinder;
import org.springframework.web.bind.annotation.InitBinder;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import com.xueji.bean.Student;
import com.xueji.service.StudentService;
import com.xueji.util.JsonData;
import com.xueji.util.UpLoadUtil;

@Controller
public class StudentController {

	@Autowired
	StudentService studentService;

	/*
	 * 获取所有学生
	 */
	@RequestMapping("/getallstudents")
	@ResponseBody
	public JsonData getAllStudents() {
		return JsonData.success(studentService.getAllStudent(), "success");
	}

	/*
	 * 获取某个学校的学生
	 *
	 */
	@RequestMapping("/getStudentBySchool")
	@ResponseBody
	public JsonData getStudentBySchool(String school) {
		return JsonData.success(studentService.getStudentBySchool(school), "success");
	}
	
	/*
	 * 根据姓名模糊获取学生
	 */

	@RequestMapping("/getstudentsMoh")
	@ResponseBody
	public JsonData getAllStudents(String name) {
		if (name.equals("") || name == null) {
			return JsonData.fail("Name is empty");
		} else {
			return JsonData.success(studentService.getStudentByNameMoHo(name), "success");
		}

	}
	
	/*
	 * 根据身份证号查询学生信息
	 */
	@RequestMapping("/getStudentByCardId")
	@ResponseBody
	public JsonData getStudentByCardId(String cardnum) {
		if (cardnum.equals("") || cardnum == null) {
			return JsonData.fail("cardnum is empty");
		} else {
			return JsonData.success(studentService.getStudentByCardId(cardnum), "success");
		}

	}
	
	

	/*
	 * 录入学生信息（带录入图片）
	 */
	@RequestMapping("/insertstudents")
	@ResponseBody
	public JsonData InsertStudents(MultipartFile file, Student student, HttpServletRequest request)
			throws IllegalStateException, IOException {

		if (student.getCardnum() == null || student.getAge() == null || student.getSex() == null) {
			return JsonData.fail("couldn't empty");
		} else {
			if (studentService.getStudentByCardId(student.getCardnum()) == null) {

				int i = studentService.insert(student);
				String filefath = UpLoadUtil.saveFile(file, request.getSession().getServletContext().getRealPath("/"));
				student.setPath(filefath);
				int count = studentService.insertImage(student);
				return i > 0 && count > 0 ? JsonData.success(null, filefath) : JsonData.fail("inserts failed");
			} else {
				return JsonData.fail("student repeat");
			}

		}
	}

	/*
	 * 给学生更新图片
	 */
	@RequestMapping("/insertstudentsPath")
	@ResponseBody
	public JsonData InsertStudentImages(MultipartFile file, Student student, HttpServletRequest request)
			throws IllegalStateException, IOException {
		if(file.equals("500")||file.toString().equals("500")){
			return JsonData.fail("更新失败!图片不能为空。");
			
		}
		else{
			String filefath = UpLoadUtil.saveFile(file, request.getSession().getServletContext().getRealPath("/"));
			student.setPath(filefath);
			int count = studentService.insertImage(student);
			return count > 0 ? JsonData.success(filefath) : JsonData.fail("failed");
		}
	}

	// 根据身份证号更新学生信息(注册前权限)

	@RequestMapping("/updateStudentByCardNum")
	@ResponseBody
	public JsonData updateStudentByCardNum(MultipartFile file, Student student, HttpServletRequest request)
			throws IllegalStateException, IOException {
		// 前台要判断文件不能为空
		String filefath = UpLoadUtil.saveFile(file, request.getSession().getServletContext().getRealPath("/"));
		student.setPath(filefath);
		int count = studentService.updateStudentByCardNum(student);
		return count > 0 ? JsonData.success(filefath) : JsonData.fail("failed");
	}

	// 根据身份证号更新学生信息(注册后权限，只能够更改学生的姓名、性别、照片；)

	@RequestMapping("/updateStudentByCardNum2")
	@ResponseBody
	public JsonData updateStudentByCardNum2(MultipartFile file, Student student, HttpServletRequest request)
			throws IllegalStateException, IOException {
		// 前台要判断文件不能为空
		String filefath = UpLoadUtil.saveFile(file, request.getSession().getServletContext().getRealPath("/"));
		student.setPath(filefath);
		int count = studentService.updateStudentByCardNum2(student);
		return count > 0 ? JsonData.success(filefath) : JsonData.fail("failed");
	}

	// 根据身份证号删除学生信息

	@RequestMapping("/deleteStuentByCardNum")
	@ResponseBody
	public JsonData deleteStuentByCardNum(String cardnum) {

		if (cardnum == null || cardnum.equals("")) {
			return JsonData.fail("cardnum empty");
		} else {
			int i = studentService.deleteStuentByCardNum(cardnum);
			return i > 0 ? JsonData.success() : JsonData.fail("delete failed");
		}
	}

	// 省管理员审核入籍（就是确定已注册）
	// 通过审核
	@RequestMapping("/okCheckStudents")
	@ResponseBody
	public JsonData isRegister(String cardnum) {

		if (cardnum == null || cardnum.equals("")) {
			return JsonData.fail("cardnum empty");
		} else {
			// 先查出学生
			Student student = studentService.getStudentByCardId(cardnum);
			student.setIsregister(1);// 代表审核成功，将标记为1
			student.setStatus(1);// status 1 表示审核成功注册在籍
			int i = studentService.updateStudentByCardNum(student);
			return i > 0 ? JsonData.success() : JsonData.fail("check failed");
		}
	}

	// 省管理员审核入籍（未通过审核）
	// 未通过审核
	@RequestMapping("/failedCheckStudents")
	@ResponseBody
	public JsonData noRegister(String cardnum) {

		if (cardnum == null || cardnum.equals("")) {
			return JsonData.fail("cardnum empty");
		} else {
			// 先查出学生
			Student student = studentService.getStudentByCardId(cardnum);
			student.setStatus(3);// status 3 表示审核未成功
			int i = studentService.updateStudentByCardNum(student);
			return i > 0 ? JsonData.success() : JsonData.fail("check failed");
		}
	}

	// 状态，0录入未注册,1注册在籍,2提交在审,3提交未通过

	// 为0的时候是在录入的时候，将isregister设置为0 status设置为0
	// 校管理员提交审核
	@RequestMapping("/tijiaoStudents")
	@ResponseBody
	public JsonData tijiaoStudents(String cardnum) {

		if (cardnum == null || cardnum.equals("")) {
			return JsonData.fail("cardnum empty");
		} else {
			// 先查出学生
			Student student = studentService.getStudentByCardId(cardnum);
			// 2代表提交在审
			student.setStatus(2);

			int i = studentService.updateStudentByCardNum(student);
			return i > 0 ? JsonData.success() : JsonData.fail("check failed");
		}
	}

	// 根据status的值查询出哪些同学已经注册，哪些注册未通过
	// 0 获取录入但是未注册的学生
	// 1 获取注册在学籍的学生
	// 2 获取注册再审的学生
	// 3 获取未通过的学生
	@RequestMapping("/getStatusStudents")
	@ResponseBody
	public JsonData getAlerdyRegister(int status) {

		return JsonData.success(studentService.getStatusStudent(status));
	}
	
	@InitBinder
	public void initBinder(WebDataBinder binder) {
		DateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd");
		dateFormat.setLenient(true);
		binder.registerCustomEditor(Date.class, new CustomDateEditor(dateFormat, true));
	}
	
	//不同条件查询数据
	@RequestMapping("/getStudentsMsgByCondition")
	@ResponseBody
	public JsonData getStudentsMsgByCondition(Student student) {

		Map<String, Object> map=new HashMap<String,Object>();
		map.put("sex", student.getSex());
		map.put("profession", student.getProfession());
		map.put("address", student.getAddress());
		map.put("admission",student.getAdmission());
		map.put("graduate", student.getGraduate());
		map.put("school", student.getSchool());
		List<Student> list=studentService.getStudentsMsgByTimeCondition(map);
		String mString=String.valueOf(list.size());
		return JsonData.success(studentService.getStudentsMsgByTimeCondition(map), mString);
	}
	
	

}

 

LiuWH888
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
系统学习前端之FormData详解
weixin_34228387的博客
08-25 1763
FormData 1. 概述 FormData类型其实是在XMLHttpRequest 2级定义的，它是为序列化表以及创建与表单格式相同的数据（当然是用于XHR传输）提供便利。 2. 构造函数 创建一个formData对象实例有几种方式 1、创建一个空对象实例 var formData = new FormData(); 此时可以调用ap...
FormData用法详解
qq_44316317的博客
12-03 551
FormData用法详解 一.创建一个formData对象实例的方式 1、创建一个空对象 var formData = new FormData();//通过append方法添加数据 2、使用已有表单来初始化对象 //表单示例 <form id="myForm" action="" method="post"> <input type="text" name="name">名字 <input type="password" name="
FormData使用方法详解
张培跃的个人博客
07-16 2664
FormData的主要用途有两个： 1、将form表单元素的name与value进行组合，实现表单数据的序列化，从而减少表单元素的拼接，提高工作效率。 2、异步上传文件 一、创建formData对象 1、创建一个空对象： //通过FormData构造函数创建一个空对象 var formdata=new FormData(); //可以通过append()方法来追加数据...
Ajax基础到实战（四）——formData对象_ajax formdata
2301_82243710的博客
06-16 772
在ajax对象 xhr 中有upload属性，upload属性中有关于文件上传的一些事件，在文件上传的过程中可以持续触发onprogress事件，在这个事件的事件对象中我们可以看到 ev.loaded 以及 ev.total 这两个事件对象的属性，分别代表当前文件上传的大小以及上传文件的总大小，我们可以据此计算出文件上传的进度并以百分比的形式显示在页面中。password 这个参数在传递给服务器端之前就已经删除了，因此可以看到在最终的输出结果中是没有看到 pasword 这个属性的。
FormData
weixin_34221276的博客
03-14 72
现代Web应用中频繁使用的一项功能就是表单数据的序列化，XMLHttpRequest 2级为此定义了FormData类型。FormData为序列化表单及创建与表单格式相同的数据提供了遍历。下面的代码创建了一个FormData对象，并向其中添加了一些数据。 var data =newFormData(); data.append("name","Nicholas"); 这个append()方法...
JS FormData对象使用方法实例详解
11-21
下面我们将详细探讨`FormData`对象的使用方法。 ### 1. 创建FormData对象 创建`FormData`对象很简单，只需要通过`FormData`构造函数即可创建一个空的对象： ```javascript var formdata = new FormData(); ``` ...
前端 | FormData 用法详解
精品推荐，你我共享
10-22 1564
本章节主要是对 FormData 用法进行简单的整理和收录，如若有问题，请及时反馈。
vue使用axios上传文件(FormData)的方法
12-08
在 Vue 中使用 Axios 上传文件，特别是通过 FormData 对象处理文件上传，是一种常见的做法。FormData 对象允许我们方便地封装表单数据，包括二进制文件，然后通过 AJAX 请求发送到服务器。 在 Vue 应用中，首先需要...
FormData的使用
轻风细雨_林木木
03-01 521
FormData的主要用途有两个： 将form表单元素的name与value进行组合，实现表单数据的序列化，从而减少表单元素的拼接，提高工作效率。 异步上传文件 创建formData对象 // 创建formData数据对象 var formdata=new FormData(); // 追加数据 formdata.append("name","laotie"); // 读取数据 console.log(formdata.get("name")); // 修改数据 formdata.set("name",
FormData对象的作用及用法
mibi8840的博客
08-05 443
一、概述 FormData 对象的使用： 1.用一些键值对来模拟一系列表单控件：即把form中所有表单元素的name与value组装成 一个queryString 2. 异步上传二进制文件。 二、使用 var formdata = new FormData(); formdata.append('upload', file.files[0]); ...
FormData的基本使用详细教程
鑫仔的博客
05-31 1552
1.FormData介绍 FormData是ajax2.0(XMLHttpRequest Level2)新提出的接口,利用FormData对象可以将form表单元素的name与value进行组合,实现表单数据的序列化,从而介绍表单元素的拼接,提高工作效率, 利用 FormData 对象，可以通过JavaScript键值对来模拟一系列表单控件，还可以使用 XMLHttpRequest的send() 方法来异步提交表单。 2.FormData使用 2.1 创建FormData对象 这里有一个前提是需要钱获取fo
《FormData 的使用详解》
最新发布
l_56z的博客
08-18 186
是一个非常实用的对象，用于轻松创建和处理表单数据，以便进行表单的提交和数据的发送。接口提供了一种方便的方式来构造一组键值对，其中的键值可以是字符串或。（二进制大对象）等类型的数据。这使得它特别适合用于表单数据的处和。API 的数据发送。
使用Ajax与formData实现文件上传
"本示例介绍了如何在C# MVC应用中使用Ajax和formData对象上传文件，包括前端HTML、JavaScript以及后端控制器的方法。" 在Web开发中，AJAX（Asynchronous JavaScript and XML）常用于实现页面无刷新的数据交互。在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值