ExtJS UploadDialog文件下传
日期：2014-05-16 浏览次数：20513 次
ExtJS UploadDialog文件上传
第一次再iteye上发表博客文章，有不足之处高手指正。
前不久在项目中用ExtJS用过上传组件，本来开始是打算用FormPanel实现上传，但是我们开发的网站后台管理平台，每天上传的东西很多，所有我就考虑用UploadDialog实现上传。
UploadDialog这个控件看上去是多文件上传，但是实际上还是单个文件实现上传的。
具体实现步骤如下所示：
1. 引入控件的文件
<link rel="stylesheet" type="text/css" href="./upload/extjs/UploadDialog/css/Ext.ux.UploadDialog.css">
<script type="text/javascript" src="./upload/extjs/UploadDialog/UploadDialog.js"></script>
?? 这两个文件需要单独去下载UploadDialog控件的这个包，这里不贴上了。
2. 页面实现，我这里是将JS全部嵌入到JSP中，其作用写在代码的注释
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>文件上传</title>
<link rel="stylesheet" type="text/css" href="./upload/extjs/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="./upload/extjs/UploadDialog/css/Ext.ux.UploadDialog.css">
<script type="text/javascript" src="./upload/extjs/ext-base.js"></script>
<script type="text/javascript" src="./upload/extjs/ext-all.js"></script>
<script type="text/javascript" src="./upload/extjs/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="./upload/extjs/UploadDialog/UploadDialog.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
dialog = new Ext.ux.UploadDialog.Dialog({
title: '文件上传' ,
url:'./json/upload_filesUpload.action' , //这里我用struts2做后台处理
post_var_name:'files',//这里是自己定义的，默认的名字叫file
width : 450,
height : 300,
minWidth : 450,
minHeight : 300,
draggable : true ,
resizable : true ,
//autoCreate: true,
constraintoviewport: true ,
//permitted_extensions:[ 'JPG' , 'jpg' , 'jpeg' , 'JPEG' , 'GIF' , 'gif' , 'png' , 'PNG' ],
modal: true ,
reset_on_hide: false ,
allow_close_on_upload: false , //关闭上传窗口是否仍然上传文件
//upload_autostart: true //是否自动上传文件
upload_autostart: false
});
dialog.show();
dialog.on( 'uploadsuccess' , onUploadSuccess); //定义上传成功回调函数
dialog.on( 'uploadfailed' , onUploadFailed); //定义上传失败回调函数
dialog.on( 'uploaderror' , onUploadFailed); //定义上传出错回调函数
dialog.on( 'uploadcomplete' , onUploadComplete); //定义上传完成回调函数
})
//文件上传成功后的回调函数
onUploadSuccess = function(dialog, filename, resp_data, record){
if(!resp_data.success){
alert(resp_data.message);//resp_data是json格式的数据
}
}
//文件上传失败后的回调函数
onUploadFailed = function(dialog, filename, resp_data, record){
alert(resp_data.message);
}
//文件上传完成后的回调函数
onUploadComplete = function(dialog){
dialog.hide();
}
</script>
</body>
</html>
?3. 后台上传action，这个代码和普通的上传差不多，基本都是读文件的操作
package ext.util.upload;
import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import org.apache.struts2.ServletActionContext;
import com.opensymphony.xwork2.ActionSupport;
/**
* Struts单文件上传类
* 支持使用UploadDialog控件上传文件
* @author lizhenbin
*
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
