弄了一天的图片上传(也就是在表单里面显示图片,预览图片),显示,通过网上找资料终于弄好了。现在整理一下,贴到这,下次要再用到也方便查询了。。。
传入后台处理,使用struts2
struts2中的struts.xml 配置
- //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>
2
顶
顶
0
踩
踩