ExtJS4 上传文件类型和大小的判断方法（实例）

最新推荐文章于 2024-09-18 12:01:14 发布

碧波之心

最新推荐文章于 2024-09-18 12:01:14 发布

阅读量7.3k

点赞数 2

分类专栏： javascript java struts2 web前端文章标签：实例 extjs4 源码

本文链接：https://blog.csdn.net/biboheart/article/details/10579175

版权

web前端同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

javascript

3 篇文章 0 订阅

订阅专栏

java

3 篇文章 0 订阅

订阅专栏

源码下载：http://download.csdn.net/detail/biboheart/6036963

接本人博文《ExtJS4+strtus2文件上传实例》，在上面的基础上加上ExtJS上传文件前对文件类型和文件大小进行判断，不符合要求的将不能被上传。

PS：本人的原创博文是在开发中遇到的一些常见问题或难题作记录。由于我是初学者，知识面还远远不够，所以可能有许多地方并不是很好的解决方案，希望朋友你有想法能给予答复。谢谢！

开始本文的方案描述（源码稍后传上）：

一直没找到ExtJS4 filefield控件的文件类型过滤与文件大小过滤的方法，本人E文水平较差，没能从官网得到这方面的资料。在网上也没有找到前人对此应用的方法介绍。实在想不出好的办法了，我就用js来完成此应用。

index.jsp代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	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" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>UploadFileExample</title>
<link rel="stylesheet" type="text/css"
	href="ExtJS/resources/css/ext-all.css" />
<script type="text/javascript" src="ExtJS/ext-all.js"></script>
<script type="text/javascript" src="js/uploadFile.js"></script>
</head>
<body>
</body>
</html>

表单源码（UploadForm.js）代码：

Ext.define('AM.view.UploadForm',{
	extend:'Ext.panel.Panel',
	alias:'widget.uploadForm',
	initComponent: function() {
		Ext.apply(this, { 
			height: 140,
			width: 514,
			title: 'ExtJS4文件上传',
			layout: {
				type: 'fit'
			},
			items: [{
				xtype: 'form',
				frame: true,
				bodyPadding: 10,
				id:'usermanage-addprisoner-form',
				items: [{
					xtype: 'filefield',
					id:'id_fileField',
					name:'file',
					fieldLabel: '文件',
					buttonText: '选择文件',
					anchor: '100%'
				}],
				dockedItems: [{
					xtype: 'panel',
					frame: true,
					layout: {
						padding: '0 10',
						type:'auto'
					},
					dock: 'bottom',
					items: [{
						xtype: 'button',
						text: '上传',
						id:'addFile',
						padding:'0 10'
					}]
				}]
			}],
        }); 
		this.callParent(arguments);
	}
});

ExtJS控制层（UploadFile.js）代码：

Ext.define('AM.controller.UploadFile', {
    extend: 'Ext.app.Controller',
    views: [
		'UploadForm'
    ],
	init:function(){
		this.control({
			'uploadForm button[id=addFile]':{
				click:addFile
			},
			'uploadForm filefield[id=id_fileField]':{
				change:checkFile
			}
		});
	}
});

function addFile(o){
	var form = Ext.getCmp("usermanage-addprisoner-form").getForm();
	if(form.isValid()){
		form.submit({
			url:'/UploadFile/uploadFile',
			method:'POST',
			waitMsg:'正在上传',
			success:function(form, action){
				var data = Ext.JSON.decode(action.response.responseText);
                alert(data.message);
			},
			failure : function(form, action) {
				var data = Ext.JSON.decode(action.response.responseText);
				alert(data.message);
			}
		});
	};
};

function checkFile(o){
	//验证图片文件的正则
	var img_reg = /\.([jJ][pP][gG]){1}$|\.([jJ][pP][eE][gG]){1}$|\.([gG][iI][fF]){1}$|\.([pP][nN][gG]){1}$|\.([bB][mM][pP]){1}$/;
	if(!img_reg.test(o.value)){
		Ext.Msg.alert('提示','文件类型错误,请选择图片文件(jpe/jpeg/gif/png/bmp)');
		o.setRawValue('');
	}
	//取控件DOM对象
	var field = document.getElementById('id_fileField');
	//取控件中的input元素
	var inputs = field.getElementsByTagName('input');
	var fileInput = null;
	var il = inputs.length;
	//取出input 类型为file的元素
	for(var i = 0; i < il; i ++){
		if(inputs[i].type == 'file'){
			fileInput = inputs[i];
			break;
		}
	}
	if(fileInput != null){
		var fileSize = getFileSize(fileInput);
		//允许上传不大于1M的文件
		if(fileSize > 1000){
			Ext.Msg.alert('提示','文件太大，请选择小于1M的图片文件！');
			picItem.setRawValue('');
		}
	}
}

//计算文件大小，返回文件大小值，单位K
function getFileSize(target){
	var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
	var fs = 0;
	if (isIE && !target.files) {
		var filePath = target.value;
		var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
		var file = fileSystem.GetFile (filePath);
		fs = file.Size; 
	}else if(target.files && target.files.length > 0){
		fs = target.files[0].size;
	}else{
		fs = 0;
	}
	if(fs > 0){
		fs = fs / 1024;
	}
	return fs;
}

struts.xml请参照本人之前博文《ExtJS4+strtus2文件上传实例》；

action源码对上一次的有一点修改，但不是针对此文的应用而修改的。是上次应用中不够完善，作出的修改。如果只是本文应用，上面已经完成了方案。

public class UploadAction extends ActionSupport{
	private static final long serialVersionUID = 1L;
	private File file;
	private String fileFileName; //文件名称
	private String fileContentType; //文件类型
	
	private boolean success;
	
	public String execute() throws Exception {
		return SUCCESS;
	}
	
	public void responseHtmlText(String text){
		HttpServletResponse response = ServletActionContext.getResponse();
		response.setContentType("text/html;charset=UTF8");
		try {
			response.getWriter().write(text);
		} catch (IOException e) {
			return;
		}
	}
	
	public void responseJson(String jsonString){
		HttpServletResponse response = ServletActionContext.getResponse();
		response.setContentType("text/json;charset=UTF8");
		try {
			response.getWriter().write(jsonString);
		} catch (IOException e) {
			return;
		}
	}
	
	public void uploadFileUtils(){
		boolean success = false;
		success = true;
		if(file == null){
			responseHtmlText("{success:" + success + ",message:'服务端未收到文件'}");
			return;
		}
		String uploadPath = ServletActionContext.getServletContext().getRealPath("/upload");
		File savefile = new File(new File(uploadPath), fileFileName);
		if (!savefile.getParentFile().exists()){
			savefile.getParentFile().mkdirs();
		}
		try {
			FileUtils.copyFile(file, savefile);
		} catch (IOException e) {
			System.out.println("保存文件失败");
			responseHtmlText("{success:" + success + ",message:'保存文件失败'}");
			return;
		}
		responseHtmlText("{success:" + success + ",message:'文件上传成功'}");
	}
	
	@SuppressWarnings("resource")
	public void uploadFileIO(){
		boolean success = false;
		success = true;
		if(file == null){
			responseHtmlText("{success:" + success + ",message:'服务端未收到文件'}");
			return;
		}
		InputStream is = null;
		OutputStream os = null;
		//基于myFile创建一个文件输入流
		try {
			is = new FileInputStream(file);
		} catch (FileNotFoundException e) {
			is = null;
			System.out.println("创建文件失败");
			responseHtmlText("{success:" + success + ",message:'创建文件失败'}");
			return;
		}
		//设置上传文件目录
		String uploadPath = ServletActionContext.getServletContext().getRealPath("/upload");
		System.out.println(uploadPath);
		//设置目标文件
		File savefile = new File(uploadPath, this.getFileFileName());
		if (!savefile.getParentFile().exists()){
			savefile.getParentFile().mkdirs();
		}
		//创建一个输出流
		try {
			os = new FileOutputStream(savefile);
		} catch (FileNotFoundException e) {
			os = null;
			System.out.println("创建输出流失败");
			responseHtmlText("{success:" + success + ",message:'创建输出流失败'}");
			return;
		}
		//设置缓存
		byte[] buffer = new byte[1024];
		int length = 0;
		//读取文件输出到toFile文件中
		try {
			while ((length = is.read(buffer)) > 0) {  
			    os.write(buffer, 0, length);  
			}
		} catch (IOException e) {
			System.out.println("读取文件失败");
			responseHtmlText("{success:" + success + ",message:'读取文件失败'}");
			return;
		}
		System.out.println("上传文件名" + fileFileName);  
        System.out.println("上传文件类型" + fileContentType);
        if(is != null){
        	try {
				is.close();
			} catch (IOException e) {
				System.out.println("关闭输入流失败");
				e.printStackTrace();
			}
        }
        if(os != null){
        	try {
				os.close();
			} catch (IOException e) {
				System.out.println("关闭输出流失败");
				return;
			}
        }
        responseHtmlText("{success:" + success + ",message:'文件上传成功'}");
	}
	
	public File getFile() {
		return file;
	}
	public void setFile(File file) {
		this.file = file;
	}
	public boolean isSuccess() {
		return success;
	}
	public void setSuccess(boolean success) {
		this.success = success;
	}
	public String getFileContentType() {
		return fileContentType;
	}
	public void setFileContentType(String fileContentType) {
		this.fileContentType = fileContentType;
	}

	public String getFileFileName() {
		return fileFileName;
	}

	public void setFileFileName(String fileFileName) {
		this.fileFileName = fileFileName;
	}
}

其它不多说了，不明白的地方可以留言！