用到了Apache 的common-uploader jar包实现后台的文件上传技术。
前台使用了webUploader的技术,更方便和形象的展现上传效果。
1.普通文件上传
前端界面 编写
请选择上传的文件:
enctype 一定是 multipart/form-data
servlet
package cn.hjm.controller;
import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Iterator;
import java.util.List;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.commons.io.FileUtils;
public class Uploader extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//看common-uploader的官方文档就知道以下代码
// Create a factory for disk-based file items
DiskFileItemFactory factory = new DiskFileItemFactory();
// Configure a repository (to ensure a secure temp location is used)
ServletContext servletContext = this.getServletConfig().getServletContext();
File repository = (File) servletContext.getAttribute("javax.servlet.context.tempdir");
factory.setRepository(repository);
ServletFileUpload sfu = new ServletFileUpload(factory);
sfu.setHeaderEncoding("utf-8");
//以上都是官方例子
try {
// Parse the request
List items =sfu .parseRequest(request);
//获取遍历器
Iterator iter = items.iterator();
//遍历
while (iter.hasNext()) {
FileItem item = iter.next();
if (item.isFormField()) { //判断是否是普通文本框
String fieldName = item.getFieldName();//我不知道这两个有什么毛用
String value = item.getString("utf-8");
} else {
if(item.getName()!=null&& !item.getName().equals("")){
//使用已有的方法进行拷贝 FileUtils.copyInputStreamToFile(item.getInputStream(),
new File("c:/targetFiles/"+item.getName()) );
item.delete();
}
}
}
} catch (FileUploadException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request,response);
}
}
这两个就可以进行文件的上传了,是不是很简单。
2.如何 展示上传进度呢?
采用了百度团队开源的 webUploader ,这个去百度搜索一下就可以下载了
1.引用了三个文件
href="${pageContext.request.contextPath}/css/webuploader.css">
编写前端代码
var uploader = WebUploader.create(
{
//flashk控件的地址
swf: "${pageContext.request.contextPath}/js/Uploader.swf",
//后台提交地址
server:"${pageContext.request.contextPath}/Uploader",
//选择文件控件的标签
pick:"#filePicker",
//自动上传文件
auto:true,
}
);
//2.选择文件后,文件信息队列展示
// 注册fileQueued事件:当文件加入队列后触发
// file: 代表当前选择的文件
uploader.on("fileQueued",function(file){
//追加文件信息div
$("#fileList").append("
});
//3.注册上传进度监听
//file: 正在上传的文件
//percentage: 当前进度的比例。最大为1.例如:0.2
uploader.on("uploadProgress",function(file,percentage){
var id = $("#"+file.id);
//更新状态信息
id.find("div.state").text("上传中...");
//更新上传百分比
id.find("span.text").text(Math.round(percentage*100)+"%");
});
//4.注册上传完毕监听
//file:上传完毕的文件
//response:后台回送的数据,以json格式返回
uploader.on("uploadSuccess",function(file,response){
//更新状态信息
$("#"+file.id).find("div.state").text("上传完毕");
});
然后,servlet还是上面的那个,这样就可以完成进度的展现了。
这些功能看过去有点难度,去做其实还是很简单的。多动手实践。没有一步就可以成功的。
爱迪生发明电灯丝还经历了那么多的失败。我们这算什么 。
所以,怕出现错误而不敢去实践的程序员不会成长。
希望自己能够突破自己。
百度下载都可以找到
用到了jar包是
commons-fileupload-1.2.2.jar
commons-io-2.1.jar
css:
webuploader.css
js:
jquery-1.10.2.min.js
Uploader.swf 兼容IE
webuploader.js