一、前言
之前在写一个web的文件上传的功能时,希望在web前端对文件的大小,及类型用js给验证掉,然后提交到服务器保存入数据库,同时要求达到页面无刷新的异步效果。在网上也看到有很多用iframe的方式实现了这样的无刷新效果。不过我在这里给大家介绍的是一款js插件,非常强大。在用这款插件前,在网上查询了好久关于js对文件类型的验证,当然这样的方法很多,大多数通过正则表达式对文件后缀验证的方式,只不过对文件大小验证这项功能上网上贴出的大多数代码都不靠谱,很多浏览器根本就不支持很多属性操作,比喻说filesize这项,而且浏览器的兼容性上考虑起来非常麻烦。不过所幸后来我找到了fileloader.js这个插件,前身好像是ajaxfileupload.js,这款插件可通过js提交验证文件的大小及类型、支持拖拽上传。有时间把它的源码研究下也跟大家分享下。fileloader.js官方地址是:http://fineuploader.com/。当然上面也有很多DEMO,大家可以自己去看。
二、工作准备
添加strut2框架;将下载的fileloader.js的文件添加到页面;将fileloader.css文件添加到页面;添加jquery包。
三、HTML页面代码
<html>
<head>
<title>文件上传</title>
<link href="css/fileuploader.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript" src="js/jquery-1.8.0.js"></script>
<script language="javascript" type="text/javascript" src="js/fileuploader.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
var thumbnailuploader = new qq.FileUploader({ //new fileuploader object
element: $('#thumbnail-fine-uploader')[0], //选定页面div元素,这里用了jquery的选择器
action: 'service/uploadImage', //提交的action地址
debug: true,
multiple: false,
allowedExtensions: ['jpeg', 'jpg', 'gif', 'png'], //允许上传的文件类型
sizeLimit: 500*1024, //允许上传文件的大小,这里是500KB,500kb = 500*1024KB
uploadButtonText:'图片上传', //在页面显示上传按钮
inputName: 'myFile', //在input标签中的name属性设置为myFile
messages:{ //设置的提示信息,包括大小类型等的操作
typeError:'只允许jpeg,jpg,gif,png格式的图片文件{file}',
sizeError:'文件大小不能超过{sizeLimit}。{file}',
emptyError:'文件不可为空{file}',
onLeave:'文件正在上传,离开将终止上传操作?'
},
showMessage:function(message){ //显示信息
alert(message);
},
failedUploadTextDisplay: { //设置返回从服务器反馈的error信息,不过我这里利用这个responseProperty属性反馈msg信息,具体的msg内容在服务中设置。
mode: 'custom',
maxChars: 40,
responseProperty: 'msg',
enableTooltip: true
}
});
})
</scripte>
</head>
<body>
<fieldset>
<legend><span>您可以上传一张不超过500kb的图片</span></legend>
<div>
<div id="thumbnail-fine-uploader"></div>
</div>
</fieldset>
</body>
</html>
三、Action服务器端代码
提示:我在项目中使用了S2SH框架,所以注意下自己写代码时候的区别。
import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.InputStream;
import javax.servlet.http.HttpServletRequest;
import org.apache.struts2.ServletActionContext;
import org.hibernate.Hibernate;
import com.byg.entity.TableMsgService;
import com.byg.service.SendMessageService;
public class FileHandleAction extends SessionAction{
private SendMessageService service;
public void setService(SendMessageService service) {
this.service = service;
}
private String myFile; //myFile属性,即刚才在声明fileuploader 对象时候设置的myFile属性。通过此属性接收file的Name
public String getMyFile() {
return myFile;
}
public void setMyFile(String myFile) {
this.myFile = myFile;
}
private String msg; //用于返回json数据,即在刚才在fileuploader对象中的failedUploadTextDisplay 中设置的responseProperty属性,显示msg的信息
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
//check file size
/**
* upload image
*/
public String uploadImage(){
HttpServletRequest request = ServletActionContext.getRequest(); //声明request对象用于获取文件流
if(this.getMyFile()!=null){ //如果图片名不为空
File myFile = new File(this.getMyFile()); //用改文件名new 一个文件对象
try {
InputStream is = request.getInputStream(); //获取文件流
FileOutputStream fout = new FileOutputStream(myFile);//定义文件输出流
byte b[] = new byte[1000];
int n ;
while((n=is.read(b))!=-1){ //从inputStream中把获取的文件流写入这个新new的文件对象中
fout.write(b,0,n);
}
is.close();
fout.flush();
fout.close();
FileInputStream in = new FileInputStream(myFile); //我的Image对象的定义是Blob类型,所以这里我通过进一步的转化myFile
TableMsgService msgService = new TableMsgService();
msgService.setImage(Hibernate.createBlob(in)); //通过Hibernate的createBlob方法转化,然后设置我的image属性
service.save(msgService); //save this object; //最后保存包含这个Blob类型数据的对象,用的Hibernate框架
msg = "文件"+this.getMyFile()+"上传成功"; //msg 设置显示成功
}catch(Exception e) {
msg = "文件"+this.getMyFile()+"上传失败"; //如果异常 设置msg显示失败
e.printStackTrace();
}
}
return "succ";
}
}
三、Struts.xml的配置
<struts>
<constant name="struts.il8n.encoding" value="utf-8"></constant>
<package name="test" extends="json-default" namespace="/service">
<action name="uploadImage" class="fileHandleAction" method="uploadImage"> //我这里写的是spring配置的Action
<result name="succ" type="json"/> //返回json数据,即msg属性的信息
</action>
</package>
</struts>
四、结语
fileuploader.js这款插件还是很是强大的,支持进度条的显示,也可以自定义气样式,不过目前我还是没有了解很透这款插件。有时间好好琢磨。希望这篇文章可以对大家有需要的分享下。
分享到:
相关推荐
网上有些这样的例子,但是下了几个都没有跑起来,哎,希望那些发文章的人要发就发全的,别发个半生不熟的。... 现在自己整理了一个Struts2+ExtJS2实现文异步文件上传,没法上传图片无法看到效果,直接上源码吧。
struts-api.chm + struts-tags.chm 原版struts-api.chm + struts-tags.chm 原版struts-api.chm + struts-tagsstruts-api.chm + struts-tags.chm 原版struts-api.chm + struts-tags.chm 原版struts-api.chm + struts-...
jquery+struts2实现异步刷新,是个不错的实例,可以结合到项目中使用,简单易懂。
STRUTS2学习文档.pdf 对Struts2的一些配置文件进行了详细的说明。 Struts2―表单验证validate(html)对validate的type属性校验类型以及param 做了详细的解释说明。 struts2和struts的比较 让你更清楚的知道struts2...
+.hibernate+Struts2毕业设计我的租房子管理系统
因为struts2+Hibernate+Spring整合J2EE企业级开发框架新手会有很多错误.所以特为新手写了一个框架.在附件里面有oracle最新的jar包和sqlserver2008的连接驱动.
jquery+struts2实现文件上传,没有jar包。下载来只需引入struts2jar就可以了
一个swfupload+struts2实现多文件上传的案例。
Java.Web整合开发王者归来.JSP+Servlet+Struts+Hibernate+Spring.part2.rar
struts2+jquery+ajax实现了文件的异步上传,的MyEclipse编写的简单项目
struts2+ajax+jquery异步批量上传超大文件.zip struts2+ajax+jquery异步批量上传超大文件.zip struts2+ajax+jquery异步批量上传超大文件.zip struts2+ajax+jquery异步批量上传超大文件.zip struts2+ajax+jquery异步...
此处提供三个文档,有用配置文件直接配的,有借助eclipse工具生成的,对最近的Struts+Spring+Hibernate进行带图文的详细整合接受,此文档由本人进行整理,希望对大家有所帮助。
Struts2.3.16.1+Hibernate3.6.10+Spring3.2.8整合 能够运行,没有任何问题 另外附带applicationContext.xml、struts.xml、hibernate.cfg.xml
jquery实现异步刷新的时候需要的架包
• 采用hibernate3+struts2+spring2+freemarker主流技术架构 • 懂html就能建站,提供最便利、合理的使用方式 • 强大、灵活的标签,用户自定义显示内容和显示方式 • 在设计上自身预先做了搜索引擎优化,增强对...
hibernate3[1].2+spring2.5+struts2.1配置过程详解
Uploadify + Struts2 实现文件上传详解 有需要的看看
struts2+ajax+jquery异步批量上传超大文件,单文件最大支持2G,一次文件数量,文件大小都可设置。简单明了。绝对可用,稍微懂点的就可以修改为自己所用。你值得拥有! 我会分享给大家更多更好的东西,希望支持!
import org.apache.struts.action.ActionForm;import org.apache.struts.action.ActionForward;import org.apache.struts.action.ActionMapping;import org.apache.struts.actions.DispatchAction等缺少
spring+struts+hibernate实现文件的上传和下载