ajax方式,将form表单中的文件上传到数据库中的操作说明

最新推荐文章于 2022-11-28 22:14:50 发布

原创最新推荐文章于 2022-11-28 22:14:50 发布 · 1.2k 阅读

5 ·

CC 4.0 BY-SA版权

Java工具箱专栏收录该内容

13 篇文章

订阅专栏

本文介绍如何使用HTML表单结合Ajax实现文件上传功能，包括前端表单设计、Ajax FormData对象的应用及后端文件处理过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.html页面核心代码片段

<form class="form-horizontal m-t" id="signupForm" enctype="multipart/form-data">
         <div class="form-group">
              <label class="col-sm-3 control-label">内容：</label>
              <div class="col-sm-8">
                  <textarea id="content" name="content" class="form-control" required></textarea>
               </div>
         </div>
         <div class="form-group">
              <label class="col-sm-3 control-label">附件：</label>
              <div class="col-sm-8">
                  <input id="myfiles" name="myfiles" class="form-control" type="file">
              </div>
         </div>
</form>

2.ajax核心代码片段

备注：ajax serialize() 表单进行序列化方式上传文件,但是这种方式，只能传递一般的参数，上传文件的文件流是无法被序列化并传递的。不过，如今主流浏览器都开始支持一个叫做 FormData 的对象，有了这个对象就可以轻松地使用 ajax 方式进行文件上传了。

	var formData = new FormData($("#signupForm")[0]);
	$.ajax({
        url:"/formDataUpload",
        type:"POST",
        data:formData,
        async:false,
        cache:false,
        contentType:false,
        processData:false,
		error : function(request) {
			//——————————————————————————
		},
		success : function(data) {     
		  //——————————————————————————
		}
	});

3.后台接收前端传参的实体类

import java.io.Serializable;
import org.springframework.web.multipart.MultipartFile;


/**
 * 接收文件实体类
 * 
 * @author 刘斌
 * @email 1522099825@qq.com
 * @date 2018-03-13 19:11:16
 */
public class Formdata implements Serializable {
	private static final long serialVersionUID = 1L;
	
	//内容
	private String content;

	//接收文件
        private MultipartFile[] myfiles;

	/**
	 * 设置：内容
	 */
	public void setContent(String content) {
		this.content = content;
	}
	/**
	 * 获取：内容
	 */
	public String getContent() {
		return content;
	}

	public MultipartFile[] getMyfiles() {
		return myfiles;
	}
	public void setMyfiles(MultipartFile[] myfiles) {
		this.myfiles = myfiles;
	}

}

4.后台controller核心代码展示

	@ResponseBody
	@PostMapping("/formDataUpload")
	public String formDataUpload(FormData formdata){		
		
        //用于处理文件上传(存于数据库)
        String fileName=null;
		byte[] fileData=null;
		MultipartFile file =formdata.getMyfiles()[0];
		fileName = file.getOriginalFilename();
		try {
			fileData =file.getBytes();
		} catch (IOException e) {		
			return "upload fail";
		} 
		System.out.println("文件名为==>"+fileName);
		System.out.println("文件大小为==>"+fileData.length);
		return "upload success";
	}

……未完待续（核心功能已经全部展示）