ExtJS UploadDialog文件下传-JavaSript-爱易网页

ExtJS UploadDialog文件下传

日期：2014-05-16　浏览次数：20416 次

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
 *

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

ExtJS UploadDialog文件下传

相关资料更多>

推荐阅读更多>