弄了一天的图片上传(也就是在表单里面显示图片,预览图片),显示,通过网上找资料终于弄好了。现在整理一下,贴到这,下次要再用到也方便查询了。。。
//uploadFile.js
Ext.onReady(function() {
var fileForm = new Ext.form.FormPanel({
title : "",
renderTo : "fileUpload",
fileUpload : true,
layout : "form",
id : "fileUploadForm",
items : [{
id : 'upload',
name : 'upload',
inputType : "file",
fieldLabel : '上传图片',
xtype : 'textfield',
anchor : '40%'
}, {
xtype : 'box',
id : 'browseImage',
fieldLabel : "预览图片",
autoEl : {
width : 300,
height : 350,
tag : 'img',
// type : 'image',
src : Ext.BLANK_IMAGE_URL,
style : 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);',
complete : 'off',
id : 'imageBrowse'
}
}],
//form事件
listeners : {
'render' : function(f) {
//
this.form.findField('upload').on('render', function() {
//通過change事件,图片也动态跟踪选择的图片变化
Ext.get('upload').on('change',
function(field, newValue, oldValue) {
//得到选择的图片路径
var url = 'file://'
+ Ext.get('upload').dom.value;
// alert("url = " + url);
//是否是规定的图片类型
if (img_reg.test(url)) {
if (Ext.isIE) {
var image = Ext.get('imageBrowse').dom;
image.src = Ext.BLANK_IMAGE_URL;// 覆盖原来的图片
image.filters
.item("DXImageTransform.Microsoft.AlphaImageLoader").src = url;
}// 支持FF
else {
Ext.get('imageBrowse').dom.src = Ext
.get('upload').dom.files
.item(0).getAsDataURL()
}
}
}, this);
}, this);
}
},
buttons : [{
text : "提交",
name : "submit",
handler : submit
}]
});
// 上传图片类型
var img_reg = /\.([jJ][pP][gG]){1}$|\.([jJ][pP][eE][gG]){1}$|\.([gG][iI][fF]){1}$|\.([pP][nN][gG]){1}$|\.([bB][mM][pP]){1}$/
});
//上傳圖片到服务器,
function submit() {
Ext.getCmp("fileUploadForm").getForm().submit({
url : "uploadAction.action",
method : "POST",
success : function(form, action) {
alert("success");
},
failure : function(form, action) {
alert("failure");
}
});
}
传入后台处理,使用struts2
package com.cocobra.action;
import java.io.*;
import java.util.Date;
import java.util.UUID;
import org.apache.struts2.ServletActionContext;
import com.opensymphony.xwork2.ActionSupport;
public class UploadAction extends ActionSupport {
/**
*
*/
private static final long serialVersionUID = 1L;
private File upload;
private String uploadContentType;
private String uploadFileName; //fileName 前面必須和uplaod一致,不然找不到文件
public File getUpload() {
return upload;
}
public void setUpload(File upload) {
this.upload = upload;
}
public String getUploadContentType() {
return uploadContentType;
}
public void setUploadContentType(String uploadContentType) {
this.uploadContentType = uploadContentType;
}
public String getUploadFileName() {
return uploadFileName;
}
public void setUploadFileName(String uploadFileName) {
this.uploadFileName = uploadFileName;
}
// 上传文件的文件名
private String getFileExp(String name) {
int pos = name.lastIndexOf(".");
return name.substring(pos);
}
private static final int BUFFER_SIZE = 16 * 1024;
public String execute() throws Exception{
Date d = new Date();
System.out.println("uploadFileName = "+this.uploadFileName);
//upload -- wapps 下面的文件夹,用来存放图片
String toSrc = ServletActionContext.getServletContext().getRealPath("upload")+"/"+d.getTime()+getFileExp(this.uploadFileName); //使用時間戳作為文件名
System.out.println("toFile= "+toSrc);
File toFile = new File(toSrc);
writeFile(this.upload,toFile);
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("写入成功!");
}
}
struts2中的struts.xml 配置
<action name="uploadAction" class="com.cocobra.action.UploadAction" >
<interceptor-ref name="fileUpload">
<!--拦截器strut2自带的, 指定上传文件的格式,如果不符合规定,将会自动拦截下来 -->
<param name="allowedTypes">image/bmp,image/png,image/gif,image/jpeg,image/jpg</param>
<param name="maximumSize">20000000000</param>
</interceptor-ref>
<interceptor-ref name="defaultStack" />
<result name ="success" >/index.jsp</result >
</action>
分享到:
相关推荐
综合这些知识点,我们可以理解这个项目是一个集成了EXTJS前端和JSP+JSTL+EL后端的网站应用,具备图片和视频上传、播放以及地图显示等功能。开发这样的系统需要掌握前端和后端的多种技术,并能有效地协调前后端数据...
在本示例中,我们将探讨如何结合ExtJS 3和Servlet技术来实现图片上传功能。 首先,我们需要理解ExtJS的组件体系。在ExtJS中,`FileUploadField`是一个专门用于文件上传的表单字段。通过这个组件,用户可以在浏览器...
标题“extjs3+springMVC上传文件”指的是使用ExtJS 3版本的JavaScript库与Spring MVC框架结合实现文件上传功能。这篇博文可能是作者在ITEYE博客上分享的一个技术实践,遗憾的是,描述部分为空,没有提供额外的信息。...
在前端,ExtJS3提供了一个强大的`FormPanel`组件,可以方便地创建表单并支持文件上传。通过添加`FileField`组件,我们可以让用户选择文件。以下是一个简单的例子: ```javascript var formPanel = new Ext....
8. **错误处理**: 当上传失败时,EXTJS应用应能够捕获并显示错误信息,以便用户了解问题所在并采取相应措施。 9. **导入到Eclipse**: 提示说项目可以直接导入到Eclipse,这意味着项目可能包含了完整的开发结构,...
在本文中,我们将深入探讨如何使用ExtJS框架与ASP(Active Server Pages)技术结合,实现一个功能完善的文件上传功能,特别是针对图片和其他类型文件的上传。ExtJS是一款强大的JavaScript库,用于构建桌面级的Web...
EXTJS的上传组件通常是基于EXTJS的FormPanel和FileField组件构建的,FileField组件可以设置为多选模式,从而支持批量选择文件。 首先,我们需要创建一个EXTJS的FormPanel实例,其中包含一个配置为`multiple: true`...
在EXTJS框架中,图片上传功能是一个常见的需求,尤其在构建富客户端应用时。EXTJS提供了强大的组件模型,使得开发人员能够轻松实现这样的功能。本文将深入探讨如何使用EXTJS来实现图片上传,包括多图预览、上传以及...
在多图片批量上传的场景中,ExtJS可能使用了`FileInput`或`FileField`组件来捕获用户选择的文件,以及`UploadButton`或自定义的`FormPanel`来实现文件上传功能。此外,ExtJS还可能利用Ajax技术,通过异步方式将文件...
在多文件上传场景下,ExtJS可以提供用户友好的界面元素,如上传按钮和进度条,同时处理文件选择、上传状态显示等交互逻辑。开发者可以通过定义`FormPanel`和`FileField`组件来创建文件上传表单,设置`allowMultiple:...
在IT领域,批量图片预览上传是Web应用中常见的功能,尤其在图像处理、社交媒体或者内容管理系统中。本文将深入探讨如何使用EXTJS框架结合HTML5和Flash技术实现这一功能。 EXTJS是一个强大的JavaScript库,提供了...
在“Extjs多文件上传”这个主题中,我们将深入探讨如何使用ExtJS实现一个支持自由添加和减少上传文件个数的多文件上传功能。 首先,ExtJS的文件上传功能通常依赖于其组件系统,特别是`Ext.form.FileField`(也称为`...
ExtJS 是一个强大的...综上所述,实现ExtJS多文件上传控件涉及到前端的文件选择、表单提交、进度显示,以及后端的文件接收和处理等多个环节。通过熟练掌握这些知识点,你可以创建出高效且用户友好的文件上传功能。
总的来说,ExtJS 2.x实现文件上传组件涉及到的主要知识点包括:FormPanel组件的使用、FileUploadField的创建、表单的Ajax提交、以及可能需要的额外插件如UploadProgress。通过这些技术,开发者可以构建出功能完备、...
格式化功能则能够使数据显示更加友好和标准化。 Extjs的组件系统非常丰富,包括按钮、日期选择器、ComboBox等,它们都可以通过配置实现复杂的交互逻辑。数据管理部分涉及到了Extjs对Ajax请求的封装、数据代理、读取...
标题中的“Extjs结合Asp.net文件上传”指的是在Web应用程序开发中,使用Ext JS(一个JavaScript库)和ASP.NET(Microsoft的服务器端技术)来实现文件上传功能。这一组合可以提供用户友好的界面和强大的后台处理能力...
2. **FormPanel**:多文件上传通常嵌入在EXTJS 的FormPanel中,FormPanel提供了提交表单和处理服务器响应的功能。确保在FormPanel配置中启用异步提交(`useAjax`)和设置正确的提交URL。 ```javascript Ext....
ExtJS端通过监听Ajax请求的完成事件,解析这个响应,并根据结果更新UI,比如显示上传成功或失败的信息。 在实际开发中,你还需要考虑一些其他因素,比如文件大小限制、文件类型检查、错误处理、进度条显示等。例如...