源码下载: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>
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); } });
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; }
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; } }