ExtJS:文件上传实例

var ext_dateFormat = 'Y-m-d H:i:s';
var dateFormat = 'yyyy-MM-dd HH:mm:ss';
var date = new Date();
Ext.onReady(function() {
var fifp =Ext.create('Ext.form.Panel', {
renderTo: 'fi-form',
width: 500,
frame: true,
title: '文件上传',
bodyPadding: '10 10 0', defaults: {
anchor: '100%',
allowBlank: false,
msgTarget: 'side',
labelWidth: 80
},
items: [{
xtype: 'textfield',
fieldLabel: '样品编号',
id:'finfo',
name:'finfo'
},{
xtype: 'container',
layout: 'hbox',
items: [{
xtype: 'textfield',
fieldLabel: '当前经度',
id:'flongitude',
name:'flongitude',
msgTarget: 'side',
allowBlank: false,
labelWidth: 80
}, {
xtype: 'textfield',
fieldLabel: '当前纬度',
id:'flatitude',
name:'flatitude',
msgTarget: 'side',
allowBlank: false,
labelWidth: 80
}]
},{
xtype : 'textfield',
fieldLabel : '上传时间',
id : 'ftime',
name : 'ftime',
// yyyy-MM-dd HH:mm:ss
value : Ext.Date.format(new Date(date.getFullYear(),date.getMonth(),date.getDate(),
date.getHours(),date.getMinutes(),date.getSeconds()), ext_dateFormat),
listeners : {
'focus' : function() {
WdatePicker({
dateFmt : dateFormat
});
}
}
},{
xtype: 'filefield',
id: 'fiupload',
emptyText: '请点击右边按钮选择文件!',
fieldLabel: '选择文件',
name: 'fiupload',
buttonText: '浏览文件',
buttonConfig: {
iconCls: 'upload-icon'
}
}], buttons: [{
text: '保存文件',
handler: function(){
var fiform = this.up('form').getForm();
if(fiform.isValid()){
fiform.submit({
type : 'ajax',
url: 'files/addData.action',
method : "POST",
waitMsg: ' 正在上传,请稍候...',
success: function(form, action) {
Ext.Msg.alert('Success','文件上传成功!');
},
failure:function(form, action)
{
Ext.Msg.alert("Failure","文件上传失败");
}
});
}
}
},{
text: '重新上传',
handler: function() {
this.up('form').getForm().reset();
}
}]
}); });

后台处理核心类方法:

	private static final int BUFFER_SIZE = 16 * 1024;

	public String addData() throws Exception {
Timestamp ts = new Timestamp(System.currentTimeMillis());
SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmssSSS");// 设置日期格式
ts = Timestamp.valueOf(this.ftime);
System.out.println(ts);
String nowtime = df.format(new Date());
System.out.println("uploadFileName = " + this.fiuploadFileName);
System.out.println("uploadContentType = " + this.fiuploadContentType);
System.out.println(nowtime);
// upload -- wapps 下面的文件夹,用来存放图片
String toSrc = ServletActionContext.getServletContext().getRealPath(
"upload")
+ "/" + nowtime + getFileExp(this.fiuploadFileName); // 使用時間戳作為文件名
String toFilename = nowtime + getFileExp(this.fiuploadFileName);
String toSrcPath = "./upload/" + toFilename;
String toinfo = this.finfo;
Double tolongitude = Double.parseDouble(this.flongitude);
Double tolatitude = Double.parseDouble(this.flatitude);
System.out.println("原文件名 : " + this.fiuploadFileName);
System.out.println("文件描述 : " + toinfo);
System.out.println("存放路径: " + toSrcPath);
System.out.println("存放文件名: " + toFilename);
System.out.println("当前经度 : " + tolongitude);
System.out.println("当前维度 : " + tolatitude);
File toFile = new File(toSrc);
writeFile(this.fiupload, toFile);
Files files = new Files(ts, toFilename, toSrcPath, toinfo, tolatitude,
tolongitude);
String result = filesService.addData(files);
System.out.println(result);
success = true;
return SUCCESS;
} private static void writeFile(File src, File dst) {
System.out.println(" == 文件写入 == ");
try {
InputStream in = null;
OutputStream out = null;
try { in = new BufferedInputStream(new FileInputStream(src),
BUFFER_SIZE);
out = new BufferedOutputStream(new FileOutputStream(dst),
BUFFER_SIZE);
byte[] buffer = new byte[BUFFER_SIZE];
while (in.read(buffer) > 0) {
out.write(buffer);
}
} finally {
if (null != in) {
in.close();
}
if (null != out) {
out.close();
}
}
} catch (Exception e) { e.printStackTrace();
}
System.out.println(" == 写入成功! == ");
}

ExtJS:文件上传实例的更多相关文章

  1. PHP中,文件上传实例

    PHP中,文件上传一般是通过move_uploaded_file()来实现的.  bool move_uploaded_file ( string filename, string destinati ...

  2. PHP学习笔记--文件目录操作(文件上传实例)

    文件操作是每个语言必须有的,不仅仅局限于PHP,这里我们就仅用PHP进行讲解 php的文件高级操作和文件上传实例我放在文章的最后部分.--以后我还会给大家写一个PHP类似于网盘操作的例子 注意:阅读此 ...

  3. PHP+ExtJS 文件上传示例

    xtJS 4 有一个非常方便的文件上传组件,可以用来将文件上传到服务器.本文PHP教程UncleToo将介绍使用PHP和ExtJS实现文件上传功能. 首先,创建文件上传组件Ext.form.Panel ...

  4. Grails笔记三:完整的文件上传实例

    文件上传在web应用中是比较普遍的,相对于使用jsp等技术实现文件上传,Grails的文件上传着实让人喜爱,因为极其简单,让人看一遍就容易轻松记住!不多说,实例如下: 假设已有一个名为uploadFi ...

  5. Extjs文件上传问题总结

    本来文件上传是一个简单而常用的功能,但是,由于刚刚接触extjs,对extjs中的控件及其使用方法并不熟悉,导致本来一个很快就可以搞定的文件上传问题,弄了将近两天的时间.现将问题及解决办法发出来,供有 ...

  6. 自定义ExtJS文件上传

    日常工作中,一般文件上传都是跟随表单一起提交的,但是遇到form表单中有许多地方有文件上传时这种方式却不是很适用,以下是我工作中用的文件上传方式: { xtype: 'fileuploadfield' ...

  7. struts2+extjs文件上传完整实现(攻克了上传中的各种问题)

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/shanhuhau/article/details/28617999 首先须要引入上传控件 <s ...

  8. SpringMVC+ajax文件上传实例教程

    原文地址:https://blog.csdn.net/weixin_41092717/article/details/81080152 文件上传文件上传是项目开发中最常见的功能.为了能上传文件,必须将 ...

  9. ASP.NET多文件上传实例

    在Web应用程序开发中,避免不了要用到上传文件这个功能,但以前上传文件是个很麻烦的事,现在有了.NET,文件上传变得轻而易举.下面的这个例子实现了多文件上传功能.可以动态添加输入表单,上传的文件数量没 ...

随机推荐

  1. 23 服务的创建Demo1

    结构 MainActivity.java package com.qf.day23_service_demo1; import android.app.Activity; import android ...

  2. Compass 更智能的搜索引擎(1)--入门

    学完了前面的Lucene系列教程: 全文检索 Lucene(1)–入门 全文检索 Lucene(2)–进阶 全文检索 Lucene(3)–分页 全文检索 Lucene(4)–高亮 Lucene确实是个 ...

  3. JQuery插件使用之Validation 快速完成表单验证的几种方式

    JQuery的Validation插件可以到http://plugins.jquery.com/上去下载.今天来分享一下,关于这个插件的使用. 简易使用 这第一种方式可谓是傻瓜式的使用,我们只需要按照 ...

  4. 【酷我天气】完整的天气App项目

    本人完全自主设计与开发的一款轻量级简约好用的天气App,无广告,无烦人的通知栏信息,定位精准,天气信息数据准确,还支持更换背景皮肤哦,颜值爆表. 实现的功能: 1自动定位:自动获取用户所在的城市位置然 ...

  5. oracle中动态SQL详解

    部分内容参考网上资料 1.静态SQLSQL与动态SQL Oracle编译PL/SQL程序块分为两个种:其一为前期联编(early binding),即SQL语句在程序编译期间就已经确定,大多数的编译情 ...

  6. 显示图像的SIFT flow描述子

    close all; % 模拟figure 5 im = zeros(401,401,3); im(:,:,:) = 0; im(2:200, 2:200, 2) = 255; im(202:400, ...

  7. Linux常用网络命令整理

    Linux上有一些非常常用的命令,来帮助我们监控网络状况. 1.Tcpdump命令 tcpdump可以将网络中传送的数据包的"头"完全截获下来提供分析.它支持针对网络层.协议.主机 ...

  8. Collections类解析

    最常用的排序: 需要实现Comparable接口 1.什么是Comparable接口 此接口强行对实现它的每个类的对象进行整体排序.此排序被称为该类的自然排序 ,类的 compareTo 方法被称为它 ...

  9. 套接字输入缓冲装置——InternalInputBuffer

    互联网的世界很复杂,信息从一端传向另一端过程也相当复杂,中间可能通过若干个硬件,为了提高发送和接收效率,在发送端及接收端都将引入缓冲区,所以两端的套接字都拥有各自的缓冲区,当然这种缓冲区的引入也带来了 ...

  10. CMake设置FOLDER失败及解决

    CMake可以设置FOLDER属性,用来分目录组织VC中的多个工程. FOLDER: Set the folder name. Use to organize targets in an IDE. T ...