form表单提交文件和Ajax提交文件

传统form表单设置enctype为multipart/form-data以二进制流的形式向后台传

<!DOCTYPE html>
<html>
	<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
	</head>
	<body>
		<form action="/proces/UploadServlet2" method="post" enctype="multipart/form-data">
			<input type="file" name="imgFileName"><br/>
			<input type="submit"/>
		</form>
	</body>
		
</html>

ajax方式

$(document).on("click",".addBtn2",function(){
	var data = new FormData($(".infoForm")[0]);//把form表单里的数据打包
	$.ajax({
		url:"/proces/UploadServlet2",
		async:true,
		type:"post",
		data:data,
		contentType:false,//
	    processData: false,//
		success:function(data){
			console.log(data);
			if(data==1){
				layer.msg('添加成功');
				layer.close(index);
				init();
			}
		},
		error:function(){
			layer.alert('您添加失败了');
			layer.close(index);
			init();
		}
	})
})
``
后台

```javascript

```java
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		// TODO Auto-generated method stub
		 //设置请求和响应的编码格式
		req.setCharacterEncoding("utf-8");
		resp.setContentType("text/html;charset=UTF-8"); 
		resp.setCharacterEncoding("utf-8");
		//表单
		String imgFileName = "";
        //核心Api
        FileItemFactory factory = new DiskFileItemFactory();
        ServletFileUpload fileUpload = new ServletFileUpload(factory);
        
        //判断是否是muitipart/form-data类型
        if(!ServletFileUpload.isMultipartContent(req)) {
            //resp.getWriter().println("表单的enctype属性不是multipart/form-data类型");
        	System.out.println("表单的enctype属性不是multipart/form-data类型");
            return;
        }
        String select = null;
        String newsTitle2="";
        String time="";
        String textarea="";
        //设置单个文件上传大小 8M
        fileUpload.setFileSizeMax(8*1024*1024); 
        //设置总上传文件大小(有时候一次性上传多个文件，需要有一个上限,此处为60M)
        fileUpload.setSizeMax(60*1024*1024);
        //设置上传监听器[参数为自定义的监听器]
       // fileUpload.setProgressListener(new ListenerUploadProgress());
        //解析请求
        try {
            List<FileItem> parseRequest = fileUpload.parseRequest(req);
            //获取数据
            for (FileItem fileItem : parseRequest) {
                //判断数据类型是不是普通的form表单字段
                if(!fileItem.isFormField()) {
                    //上传文件
                    String fileName = fileItem.getName();
                    InputStream fileStream = fileItem.getInputStream();
                    //定义保存的父路径（服务器部署相对的绝对路径）
                    String parentDir = this.getServletContext().getRealPath("/upload");
                    //定义绝对路径
                    //String parentDir = "D:\\eclipse-workspace-new\\myWish\\WebContent\\upload";
                    //使用UUID+文件名的方式，避免文件重名
                    String realFileName = UUID.randomUUID().toString()+"-"+fileName;
                    //创建要保存的文件
                    File file = new File(parentDir,realFileName);
                    //判断文件夹是否存在
                    if(!file.getParentFile().exists()) {
                        //创建文件夹[多级文件夹]file.madir是创建单一文件夹
                        file.getParentFile().mkdirs();
                    }
                    
                    //创建输出流
                    OutputStream out = new FileOutputStream(file);
                    //创建字节缓存
                    byte[] buffer = new byte[1024];
                    int len = -1;
                    //一次读取1kb(1024byte),返回-1表明读取完毕
                    while((len = fileStream.read(buffer))!=-1) {
                        //一次写入1kb(1024byte)
                        out.write(buffer,0, len);
                    }
                    System.out.println(parentDir);
                    System.out.println(realFileName);
                    imgFileName = realFileName;
                    //冲刷流资源
                    out.flush();
                    //关闭流
                    out.close();
                    fileStream.close();
                    
                }else {
                    //普通字段
                    
                    //字段名
                    String fieldName = fileItem.getFieldName();
                    //字段值中文乱码
                    String fieldValue = fileItem.getString("UTF-8");
                    
                    if(fieldName.equals("select")) {
                    	select=fieldValue;
                    	
                    }
                    if(fieldName.equals("newsTitle2")) {
                    	newsTitle2=fieldValue;
                    }
                    if(fieldName.equals("time")) {
                    	time=fieldValue;
                    }
                    if(fieldName.equals("textarea")) {
                    	textarea=fieldValue;
                    }
                    System.out.println("select"+select);
                    System.out.println(fieldName+":"+fieldValue);
                }
            }
        } catch (FileUploadException e) {
            e.printStackTrace();
        }

weixin_45007916

发布了29 篇原创文章 · 获赞 28 · 访问量 585

私信关注

form表单提交文件和Ajax提交文件

form表单提交文件和Ajax提交文件

传统form表单设置enctype为multipart/form-data以二进制流的形式向后台传

ajax方式

猜你喜欢