效果图:
前台页面:
上传文件显示进度,需使用jquery form插件,对页面进行一些校验,比如文件非空、文件类型、文件大小、上传进度展示
文件大小检测:
function IsFileSizeOk(fileid) /* 文件大小检测 */
{
try{
var fileSize=0;
if(navigator.userAgent.match(/msie/i)) /* IE下的检测方式 ,并不是特别顺利,会出现Automation 服务器不能创建对象的错误*/
{
var myFSO = new ActiveXObject("Scripting.FileSystemObject");
var filepath = $("#"+fileid).val();
var thefile = myFSO.getFile(filepath);
var filesize = thefile.size;
}
else{
fileSize=$("#"+fileid)[0].files[0].size;
fileSize=fileSize/1048576;
}
return (fileSize<50.0);
}catch(e)
{
alert("出现异常情况,请换用其它高版本的浏览器尝试");
return ;
}
}
上传进度展示:
function submitreplyInfo()
{
$("#fileuptip").show();
var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');
$("#postfile").attr("disabled",true);
$("#postacform").ajaxSubmit({ /* jquery form提交表单 */
type:'post',
url:"<%=tempContextUrl%>"+"/UploadFile",
dataType:"text",
beforeSend:function(){
status.empty();
var percentVal = '0%';
bar.width(percentVal)
percent.html(percentVal);
},
uploadProgress:function(event,position,total,percentComplete){ /* 上传进度展示 */
var percentVal = percentComplete + '%';
bar.width(percentVal);
percent.html(percentVal);
},
success:function(data1){
var data=eval("(" + data1+ ")"); /* 服务端返回的是text/plain类型将其转换为json格式 */
var objc= JSON&&JSON.parse(JSON.stringify(data))||jQuery.parseJSON(data);/* 对json格式进行解析 */
alert(objc.issuccess==='true');
if(objc.issuccess==='false')
{
$(".errorinfo").text(objc.info);
}
else if(objc.issuccess==='true')
{
$(".errorinfo").css("color","#34E4EC");
$(".errorinfo").text(objc.info);
}
},
error:function()
{
}
,
complete:function(xhr){
$("#fileuptip").hide();
}
})
$("#postfile").attr("disabled",false);
}
页面代码:
<label class="errorinfo"></label>
<div id="fileuptip">
<div class="fileprogress">
<label>上传进度:</label>
<div class="progress">
<div class="bar"></div >
<div class="percent">0%</div >
</div>
</div>
</div>
<div id="main">
<form action="" id="postacform" method="post" enctype="multipart/form-data">
<div class="box">
<div class="lablearea">
<label class="lableinfo">选择上传文件:</label>
</div>
<input type="file" name="file" id="filepho" class="filephol">
<br/>
<label class="inputtip labelfileinfo">*文件为word文档 Excel表格 pdf文档 压缩包,必须小于50M</label>
</div>
<input type="submit" id="postfile" value="上传文件">
</form>
</div>
进度条css:
.fileprogress{
margin-left:75px;
}
.fileprogress label{
display:block;
float:left;
margin-top:3px;
}
.progress { position:relative; left:75px;width:400px; border: 1px solid #99CCCC;}
.bar { background-color: #FF9900; width:0%; height:20px; border-radius: 3px; }
.percent { position:absolute; display:inline-block; top:3px; left:48%; }
服务端代码实现:
实现上传文件的校验保存以及返回信息
package upload;
import java.io.File;
import java.io.IOException;
import java.util.Iterator;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONObject;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
@WebServlet("/UploadFile")
public class UploadFile extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
private boolean isMultipart;
private int maxFileSize = 50*1024* 1024; //允许上传文件的最大值
private int maxMemSize = 4* 1024;
private File filemenu;
private String filestyles[]={"docx","doc","xls","xlsx","pdf","rar","zip"}; //允许上传文件的大小
private boolean issuccess=false;
private boolean isfilestyle=false;
private String info="文件上传非法";
private JSONObject jsonObject=new JSONObject();
public UploadFile() {
super();
// TODO Auto-generated constructor stub
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setCharacterEncoding("utf-8");
request.setCharacterEncoding("utf-8");
response.setContentType("text/plain");
isMultipart = ServletFileUpload.isMultipartContent(request);
if(isMultipart) //提交的request请求包含上传文件请求
{
DiskFileItemFactory factory = new DiskFileItemFactory();
factory.setSizeThreshold(maxMemSize); //设置内存可存字节数
factory.setRepository(factory.getRepository()); //设置临时文件目录
ServletFileUpload upload = new ServletFileUpload(factory);
try{
List fileItems = upload.parseRequest(request);
Iterator i = fileItems.iterator();
while ( i.hasNext () )
{
FileItem fi = (FileItem)i.next();
if (!fi.isFormField () )
{
String fileName = fi.getName(); //获取上传文件名称
String filestyle=fileName.substring(fileName.lastIndexOf(".")+1).toLowerCase().trim(); //获得上传文件类型
long size = fi.getSize(); //获取上传文件大小
for(String style:filestyles)
{
if(style.equals(filestyle))
{
isfilestyle=true;
break;
}
}
System.out.println(isfilestyle);
if(isfilestyle)
{
if(size>maxFileSize)
{
issuccess=false;
info="上传文件过大!";
}
else{
filemenu=new File(this.getServletContext().getRealPath("/")+File.separator+"upfile");
if(!filemenu.exists())
filemenu.mkdir();
fi.write(new File(filemenu+File.separator+System.currentTimeMillis()+"."+filestyle));
System.out.println(filemenu+File.separator+System.currentTimeMillis()+"."+filestyle);
issuccess=true;
info="上传文件成功!";
}
}
else{
issuccess=false;
info="上传文件类型非法!";
}
}
}
}catch(Exception ex) {
System.out.println(ex);
}
}
jsonObject.put("issuccess",issuccess+"");
jsonObject.put("info",info);
response.getWriter().write(jsonObject.toString());
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
源码下载