Swfupload-很酷的文件下传工具 _Web前端

Swfupload--很酷的文件上传工具

Swfupload官方的描述是：Swfupload是一个包含有flash上传功能的javascript类库，它给我们带来多文件选择、上传进度条和客户文件大小检查等便利。

首先，要了解Swfupload，第一反应是上谷歌查查介绍。当然也可以搜出他的官方网站，就是http://www.swfupload.org了。

要下载它的Release包和Demo可以访问http://code.google.com/p/swfupload/，两个zip包很小，不到一分钟就check下来。

我下载的Swfupload v2.2.0.1。

1.解压缩samples包，进入demos/simpledemo文件夹，这里就是swfupload最简单的入门例子了。

2.我用的是JSP，所以可以在myeclipse中新建一个web工程，将demos/simpledemo文件夹中js和images2个文件夹和demos下的css文件夹拷贝到WebRoot下面，然后打开simpledemo中的index.php，将内容拷贝到工程的index.jsp中，并去掉<?php ?>的内容部分。

3.接下来就要稍微修改Index.jsp中的内容，添改如下：

view plaincopy to clipboardprint?

<link?href="css/default.css"?mce_href="css/default.css"?rel="stylesheet"?type="text/css"?/>??
<mce:script?type="text/javascript"?src="js/swfupload.js"?mce_src="js/swfupload.js"></mce:script>??
<mce:script?type="text/javascript"?src="js/swfupload.queue.js"?mce_src="js/swfupload.queue.js"></mce:script>??
<mce:script?type="text/javascript"?src="js/fileprogress.js"?mce_src="js/fileprogress.js"></mce:script>??
<mce:script?type="text/javascript"?src="js/handlers.js"?mce_src="js/handlers.js"></mce:script>??
??
upload_url:?"http://localhost:8080/SwfuploadDemo/upload",??
post_params:?{"SESSIONID"?:?"<%=session.getId()%>"},??

4.然后要编写一个简单的servlet来处理文件上传，要用到commons-fileupload.jar,commons-io.jar

view plaincopy to clipboardprint?

public?void?doPost(HttpServletRequest?request,?HttpServletResponse?response)??
????????????throws?ServletException,?IOException?{??
????????HttpSession?session?=?request.getSession();??
????session.setAttribute("SESSIONID",session.getId());??
????FileItemFactory?factory?=?new?DiskFileItemFactory();??
????ServletFileUpload?upload?=?new?ServletFileUpload(factory);??
????try?{??
????????List<FileItem>?items?=?upload.parseRequest(request);??
????????Iterator<FileItem>?itr?=?items.iterator();??
????????while(itr.hasNext()){??
?????????????????FileItem?item=(FileItem)itr.next();??
??????????????????????String?fileName=item.getName();??
????????????if(fileName!=null){??
????????????????File?fullFile=new?File(item.getName());??
????????????????File?savedFile=new?File("d:/uploads",fullFile.getName());??
????????????????item.write(savedFile);??
????????????}??
????????}??
????}?catch?(FileUploadException?e)?{??
????????e.printStackTrace();??
????}?catch?(Exception?e)?{??
????????e.printStackTrace();??
????}??
}??

5.最后，部署到tomcat，运行，看看酷酷的上传效果吧！