Extjs+Struts2异步下传头像

Extjs+Struts2异步上传头像

项目中有个地方要实现用户上传头像的功能，这其实是个非常简单的功能，刚开始的时候，我的思路是采用使用Ext.Ajax来异步上传头像的，但是无论怎么实现后台都得不到文件，反复验证了后台的Struts2的代码没有错误，配置文件也没有错误，开始反思原因，经过google后发现，其实上传文件的时候用ajax是不能实现的，因为文件传递安全性方面的考虑，ajax只能将文件名传递到后台，并不能将文件本身传递给后台，要在extjs实现文件上传必须采用在form中提交的方式，不过为了实现类似于ajax的用户体验，可以在配置项中添加fileUpload:true的方式，来实现异步提交，而不必出现页面跳转的方式。废话不多说了看代码：

Extjs代码：

struts2的配置文件：

?<package name="default" extends="json-default">
?????? ?<action name="upLoadAvatar" type="json">
???????????? ?<param name="ContentType">text/html</param>
????????????? <param name="includeProperties">avatarurl,message,success</param>
??????????? </result>
????? </action>
?? </package>

Java代码如：

private File upload;??
?private String avatarurl;
?private String uploadContentType;??
?private String uploadFileName;??

?。。。。

/**
? * 上传用户头像
? * @return
? */
?public String? upLoadAvatar() {??
??? int BUFFER_SIZE = 16 * 1024;
??? InputStream in = null ;
?????? OutputStream out = null ;
?????? if(upload==null){
???? ?? ? message = "文件不能为空";
???? avatarurl = "/images/login/photo-head.jpg";
???? success = false;
???? return SUCCESS;
?????? }
??? long length? = Math.round(upload.length()/1024);//文件大小，kb单位
??? if(length>600){
???? message = "文件大小超过300K的限制";
???? avatarurl = "/images/login/photo-head.jpg";
???? success = false;
???? return SUCCESS;
??? }
??? Map session = ActionContext.getContext().getSession();
??? int school_id = ( (UserInformation)session.get("ui")).getSchool_id();
??? int type = ( (UserInformation)session.get("ui")).getType();
??? String username = ( (UserInformation)session.get("ui")).getUsername();
??? int year = Calendar.getInstance().getTime().getYear()+1900;
???? String uploaddir = File.separator+"upload"+File.separator+school_id+File.separator+year+File.separator;
???? String relative = "/upload/"+school_id+"/"+year+"/";
???? Long timestamp = System.currentTimeMillis();
???? String imageName = username + "_" +? timestamp+".jpg";
???? String realaddr = ServletActionContext.getServletContext().getRealPath(uploaddir);
??????? File saveFile = new File(new File(realaddr), imageName);
???????? if (!saveFile.getParentFile().exists()) {
????????????? saveFile.getParentFile().mkdirs();
????????? }
???????? try {
?????? ? in = new BufferedInputStream( new FileInputStream(upload), BUFFER_SIZE );
?????? ?out = new BufferedOutputStream( new FileOutputStream(saveFile),???? BUFFER_SIZE );
?????? ?byte [] buffer = new byte [ BUFFER_SIZE ];
????????????? int len = 0;
????????????? while ((len = in.read(buffer)) > 0) {
????????????????? out.write(buffer, 0, len);
???????????????? out.flush();
????????????? }?
?????????????。。。。其他的业务代码省略

???????????? success = true;
???????????? message = "上传成功";
????????? } catch (IOException e) {
????????????? e.printStackTrace();
????????? }finally {
?????????????? if ( null != in) {
?????????????????? try {
?????????????????????? in.close();
?????????????????? } catch (IOException e) {
?????????????????????? e.printStackTrace();
?????????????????? }
?????????????? }
?????????????? if ( null != out) {
?????????????????? try {
?????????????????????? out.close();
?????????????????? } catch (IOException e) {
?????????????????????? e.printStackTrace();
?????????????????? }
?????????????? }
????????? }
???????? return SUCCESS;
?}??

这样前台就可以传递图片到后台了，其实传递其他的文件也是相同的道理。

图片效果：

Extjs+Struts2异步下传头像

Extjs+Struts2异步下传头像

热点推荐