java ajax异步上传文件(文档、图片都可以)

在写项目的时候,经常用到图片上传啊什么的,这儿提供一个方法,万能,咋都能用。

 

ajax

 

$(".save-head").click(function () {
                		var formData = new FormData();
                 		formData.append('file', $('#upload')[0].files[0]);
                 		formData.append('school', '${userCenterJson.teacher.schoolCode }');
                 		formData.append('teacherCode', '${userCenterJson.teacher.teacherCode }');
                 		$.ajax({
             				url : '<%=SignAndMd5.uploadimg %>',
             				scriptCharset : "UTF-8",
             				contentType : "application/x-www-form-urlencoded; charset=UTF-8",
             				type : 'POST',
             				cache : false,
             				data : formData,
             				processData : false,
             				contentType : false,
             			}).done(function(data) {
             				alert("上载成功");
             				$("#headImg").val(data.trim());
             				$("#headform").submit();
             			}).fail(function(res) {
             				console.log(res.responseText);
             			});
                	 });  

 

 

这边对formData做一个解释,其实这就是一个载体,有点像json一样,用来传数据的,但是他可以放着文件信息传到后台

我这边传了两个值,用于动态拼装文件路径,后台获取的代码这里放一下:

 

String school = "";
        String teacherCode = "";
        
        while (iter.hasNext()) {
        	FileItem item = (FileItem) iter.next();
            item.getString("UTF-8");
            
            if (item.getFieldName().equals("school")) {
            	school = item.getString();
            	filePath += school + "//";
            	filePath += "TeacherHeadPic//";
            }
            if (item.getFieldName().equals("teacherCode")) {
            	teacherCode = item.getString();
            }
        }


我的ajax url为了方便直接是一个jsp,随取随用。

 

 

 

<%@page import="java.awt.Color"%>
<%@page import="com.kids.image.ImageUtils"%>
<%@page import="com.kids.picWork.ImgHandel"%>
<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage=""%>
<%@ page import="java.util.List"%>
<%@ page import="java.io.*"%>
<%@ page import="java.util.Iterator"%>
<%@ page import="org.apache.commons.fileupload.FileItem"%>
<%@ page import="org.apache.commons.fileupload.disk.DiskFileItemFactory"%>
<%@ page import="org.apache.commons.fileupload.servlet.ServletFileUpload"%>
<%
	request.setCharacterEncoding("UTF-8");

    String filePath = request.getRealPath("/SchoolCenter/") + "//";
    try {
        DiskFileItemFactory fu = new DiskFileItemFactory();
        fu.setSizeThreshold(2 * 1024 * 1024);
        fu.setSizeThreshold(4096);
        ServletFileUpload upload = new ServletFileUpload(fu);
        upload.setHeaderEncoding("UTF-8");
        List fileItems = upload.parseRequest(request); 
        Iterator iter = fileItems.iterator();
        String TextDate = "";
        
        String school = "";
        String teacherCode = "";
        
        while (iter.hasNext()) {
        	FileItem item = (FileItem) iter.next();
            item.getString("UTF-8");
            
            if (item.getFieldName().equals("school")) {
            	school = item.getString();
            	filePath += school + "//";
            	filePath += "TeacherHeadPic//";
            }
            if (item.getFieldName().equals("teacherCode")) {
            	teacherCode = item.getString();
            }
        }
        Iterator iter2 = fileItems.iterator();
        while (iter2.hasNext()) {
        	FileItem item = (FileItem) iter2.next();
            item.getString("UTF-8");
            //忽略其他不是文件域的所有表单信息
            
            if (!item.isFormField()) {
            	
                String name1 = item.getName();//获取上传的文件名
               
                long size = item.getSize();//获取上传的文件大小(字节为单位)
                if ((name1 == null || name1.equals("")) && size == 0) {
                    continue;//跳到while检查条件
                }
                int end = name1.length();
                int begin = name1.lastIndexOf("\\");
                String newname = name1.substring(begin + 1, end);
                TextDate = newname;
                if (TextDate.length() == 0) {
                    System.out.println("上传文件导入异常,请重新上传...");
                } else {
                    try {
                        //保存文件
                        newname = teacherCode + "." + newname.split("\\.")[1];
                        
                        System.out.println(newname);
                        
                        File savedFile = new File(filePath, newname);//用原文件名,作为上传文件的文件名。
                        item.write(savedFile);
                        item.delete();
                        
                        new ImgHandel().thumbnailImage(filePath + newname, 150, 150, "thumb_", false);
                        
                		File f = new File(filePath + newname);
                		ImageUtils.fromFile(f)
                		.scale(1)
                		.rotate(90)		//旋转角度
                		.quality(1)
                		.bgcolor(Color.white)
                		.toFile(new File(filePath + newname));
                        
                        out.println(newname);
				        out.flush();
				        out = pageContext.pushBody();
                    } catch (Exception e) {
                        out.println(e);
                    }
                }
            }
        }
        
    } catch (Exception e) {
        e.printStackTrace();
    }
%>


这里的ajax对图片有两个处理,

 

一个是生成缩略图,

 

new ImgHandel().thumbnailImage(filePath + newname, 150, 150, "thumb_", false);

 

 

 

 

 

一个是旋转上传的图片

 

 new ImgHandel().thumbnailImage(filePath + newname, 150, 150, "thumb_", false);
                        
                		File f = new File(filePath + newname);
                		ImageUtils.fromFile(f)
                		.scale(1)
                		.rotate(90)		//旋转角度
                		.quality(1)
                		.bgcolor(Color.white)
                		.toFile(new File(filePath + newname));

 

 

 

如果不需要,直接删除即可。

 

这两个操作在另外文章中。

 

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
(1)创建网页,创建网页文件login.html或使用课堂练习3的login.jsp,对应的servlet接口文件verify.java使用课堂练习3的verify.java,以及接口消息所使用的消息类message.java使用课堂练习3的message.java使用div+css按图1进行布局,点击“登录”按钮发起AJAX执行登录,具体功能和验证方式参见课堂练习2和3,登录成功后跳转到main.html。 点击“注册”按钮链接到regist.html 图1 登录设计图 (2)创建网页,创建网页文件regist.html,和对应的servlet接口文件registVerify.java使用div+css按图2进行布局,点击“注册”按钮发起AJAX提交注册,由于需要上传文件,所以需要,提交之前先做数据验证,确保用户名、密码、确认密码必填, Email如果填写了,要符合Email格式(由于同时要提交图片,此处须使用DataForm进行提交)。 填写用户名后(用户名文本框的change事件)可以将用户名提交到loginVerify接口,以验证用户名是否已存在,如果用户名已存在,则报错。 数据提交到registVerify接口后,经过服务端验证,将数据写入数据库中,完毕之后返回成功信息;regist.html收到成功消息后,再跳转到login.html。 点击“已有账号”按钮链接到login.html 图2 注册设计图 (3)创建网页,创建网页文件main.html,和对应的servlet接口文件main.java。 当main.html就绪时(jQuery的$().ready()事件),异步请求main接口; main接口读取session中的user信息,根据此信息查询数据库,读取用户的详细信息,包括头像文件的文件名。 main.html获取到main接口的数据后,将数据及图片显示出来,图片通过图片名构造URL即可显示。
05-25

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值