您的位置:首页 > Web前端

Felx上传文件显示进度条

2015-07-14 15:01 232 查看
Flex前端代码

[java]
view plaincopyprint?

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
creationComplete="init();">
<s:layout>
<s:BasicLayout/>
</s:layout>
<fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import flash.net.FileReference;
import mx.controls.Alert;
import mx.events.CloseEvent;
import flash.events.*;

private var file: FileReference;

private function init(): void{
Security.allowDomain("*");
file = new FileReference();
file.addEventListener(ProgressEvent.PROGRESS, onProgress);
file.addEventListener(Event.SELECT, onSelect);
}

private function upload(): void{
file.browse();
}
private function onSelect(e: Event): void{
Alert.show("上传 " + file.name + " (共 "+Math.round(file.size)+" 字节)?",
"确认上传",
Alert.YES|Alert.NO,
null,
proceedWithUpload);
}

private function onProgress(e: ProgressEvent): void{
lbProgress.text = " 已上传 " + e.bytesLoaded
+ " 字节,共 " + e.bytesTotal + " 字节";
var proc: uint = e.bytesLoaded / e.bytesTotal * 100;
bar.setProgress(proc, 100);
bar.label= "当前进度: " + " " + proc + "%";
}

private function proceedWithUpload(e: CloseEvent): void{
if (e.detail == Alert.YES){
var request: URLRequest = new URLRequest("http://localhost:8080/firstFlex/fileUploadServlet");
try {
file.upload(request);
} catch (error:Error) {
trace("上传失败");
}

}
}
]]>
</fx:Script>

<mx:Canvas width="100%" height="100%">
<mx:VBox width="100%" horizontalAlign="center">
<mx:Label id="lbProgress" text="上传"/>
<mx:ProgressBar id="bar" labelPlacement="bottom" themeColor="#F20D7A"
minimum="0" visible="true" maximum="100" label="当前进度: 0%"
direction="right" mode="manual" width="200"/>
<mx:Button label="上传文件" click="upload();"/>
</mx:VBox>
</mx:Canvas>
</s:Application>

Java servlet端代码

[java]
view plaincopyprint?

package test;

import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Iterator;
import java.util.List;

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;

public class FileUploadServlet extends HttpServlet {

private static final long serialVersionUID = 1L;
//存放文件路径
private String uploadPath = "D:/Tomcat 6.0/webapps/firstFlex/bin-debug/";

private int maxPostSize = 100 * 1024 * 1024;

public FileUploadServlet() {
super();
}

public void destroy() {
super.destroy();
}

public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

// String dressId = request.getParameter("dressID");
// System.out.println(dressId);

//防止标题中还有中文字符是出现乱码
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html; charset=UTF-8");
DiskFileItemFactory factory = new DiskFileItemFactory();
factory.setSizeThreshold(4096);
ServletFileUpload upload = new ServletFileUpload(factory);
upload.setSizeMax(maxPostSize);
try
{
List fileItems = upload.parseRequest(request);
Iterator iter = fileItems.iterator();
while (iter.hasNext())
{
FileItem item = (FileItem) iter.next();
if (!item.isFormField())
{
String name = item.getName();
System.out.println(name);
try
{
item.write(new File(uploadPath + name));
}
catch (Exception e)
{
e.printStackTrace();
}
}
}
}
catch (FileUploadException e)
{
e.printStackTrace();
}
}

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}

public void init() throws ServletException {
// Put your code here
}

}

3.下面是web.xml文件Servlet的配置部分,把它加入到web.xml中即可。

<servlet>
<servlet-name>fileUploadServlet</servlet-name>
<servlet-class>test.FileUploadServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>fileUploadServlet</servlet-name>
<url-pattern>/fileUploadServlet</url-pattern>
</servlet-mapping>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: