`
jsczxy2
  • 浏览: 1275295 次
  • 性别: Icon_minigender_1
  • 来自: 常州
文章分类
社区版块
存档分类
最新评论

EXT 3.x 使用详解之fileUpload

    博客分类：
  • ext
EXTjsonFPCSSJavaScript 
阅读更多

哎，首先发泄一下情绪。。。这个fileupload搞了我一天时间，为何？？？问题出在我查看ext-3.1.1\examples\form\file-upload.html的时候发现它的例子有BUG。。。去ext的官方论坛看了下这问题不小，好多人遇到。。。

 

是个什么BUG呢？

我完全按照file-upload.html的例子做完发现当我设置fileUpload: true后上传文件后居然返回json解析出错...然后进行debug...发现由于ext的FileUploadField是伪ajax上传的做法，也就是生成了个frame,造成返回json后解析出其他一些内容，更奇怪的是各个浏览器解析的内容并不相同- -，泪流满面。。。

 

查看了下国外论坛，这方面的BUG报的不少，解决基本没有介绍。。。或者试了失败。。。

 

算了自己调试吧，经过调试，使用response.setContentType("text/html;charset=utf-8");后会莫名多出很多html代码在json中，换成response.setContentType("text/plain;charset=utf-8");以后火狐多了<pre>json对象</pre>，IE7多了<PRE>json对象</PRE>,Opera多了<PRE>json对象,很奇怪Opera并没有</PRE>标签。。。其他浏览器没有查，估计也就差不多是pre这个标签。。。

 

算了 看来只有修改下源码把pre标签去掉才能正确解析json了。。。

 

来看代码吧:(自己导入json相关包以及ext相关js和css)

先上jsp:

<%@ page language="java" pageEncoding="UTF-8"%>
<%@ include file="/common/taglib.jsp"%>
<html>
	<head>
        <script type="text/javascript">
		var contextPath = '${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}';
	</script>
        //新加入uploadfile必须的2个文件----fileuploadfield.css和FileUploadField.js都在ext-3.1.1\examples\ux\fileuploadfield目录下
	<link rel="stylesheet" type=text/css href="${ctxPath }/styles/fileuploadfield.css" />
	<script type="text/javascript" src="${ctxPath }/scripts/fileupload/FileUploadField.js"></script>
	<script type="text/javascript">
	
Ext.onReady(function(){

    Ext.QuickTips.init();
	var fp = new Ext.FormPanel({
        renderTo: 'fi-form',
        fileUpload: true,//要上传必须的属性
        width: 500,
        frame: true,
        title: 'File Upload Form',
        autoHeight: true,
        bodyStyle: 'padding: 10px 10px 0 10px;',
        labelWidth: 50,
        defaults: {
            anchor: '95%',
            allowBlank: false,
            msgTarget: 'side'
        },
        items: [{
            xtype: 'hidden',
            name: 'path',
            value: "file\\"
        },{
            xtype: 'fileuploadfield',
            id: 'form-file',
            emptyText: 'Select an image',
            fieldLabel: 'Photo',
            name: 'myUpload',//与struts1的form的FormFile属性相对应
            buttonText: '浏览'
            //buttonCfg: {
                //iconCls: 'upload-icon'
            //}
        }],
        buttons: [{
            text: 'Save',
            handler: function(){
                if(fp.getForm().isValid()){
	                fp.getForm().submit({
	                    url: contextPath + '/search.do?method=uploadFile',
	                    waitMsg: 'Uploading your photo...',
	                    success: function(fp, o){
	                    	alert(o.result.message);
	                    }
	                });
                }
            }
        },{
            text: 'Reset',
            handler: function(){
                fp.getForm().reset();
            }
        }]
    });
    
    });
	</script>
	</head>
	<body>
	 <div id="fi-form"></div>
	</body>
</html>

 后台searchAction的方法:

      public static final String ROOT = "upload\\";
 public ActionForward uploadFile(ActionMapping mapping, ActionForm form,
			HttpServletRequest request, HttpServletResponse response)
			throws Exception {
		SearchForm searchForm = (SearchForm)form;
		String myUploadFileName = searchForm.getMyUpload().getFileName();
		System.out.println(myUploadFileName);
		String path = request.getParameter("path");
		System.out.println(path);
		String rootPath = getServlet().getServletContext().getRealPath("/");
		rootPath += ROOT;
		String sp = rootPath + path;
		System.out.println(sp);
		MyUtils.mkDirectory(sp);
		try {
                        //此处借用了lhq的Util类
			MyUtils.upload(myUploadFileName, sp, searchForm.getMyUpload());
		} catch (RuntimeException e) {
			e.printStackTrace();
		}
		MessageVO vo = new MessageVO();
		vo.setMessage("aaa");
                //务必要加上success属性以便ext识别
		vo.setSuccess(true);
		JSONObject object = JSONObject.fromObject(vo);//注意使用text/plain而不要使用text/html或者text/xml
		response.setContentType("text/plain;charset=utf-8");
		response.getWriter().write(object.toString());
		return null;
	}

MessageVO.java:

package com.xuyi.vo;

public class MessageVO {
	
	boolean success;
	
	String message;
	

	public boolean isSuccess() {
		return success;
	}

	public void setSuccess(boolean success) {
		this.success = success;
	}

	public String getMessage() {
		return message;
	}

	public void setMessage(String message) {
		this.message = message;
	}
	
	
	
}

 

 

 

 

SearchForm.java:

package com.xuyi.web.form;

import org.apache.struts.upload.FormFile;

public class SearchForm extends BaseForm {
	
	/**
	 * 
	 */
	private static final long serialVersionUID = -2466145267901361949L;
	
	FormFile myUpload;

	public FormFile getMyUpload() {
		return myUpload;
	}

	public void setMyUpload(FormFile myUpload) {
		this.myUpload = myUpload;
	}

	
	
}

 MyUtils.java:

package com.xuyi.util;

import java.io.File;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;

import org.apache.struts.upload.FormFile;

public class MyUtils {

	/**
	 * 上传文件
	 * 
	 * @param savePath
	 *            文件的保存路径
	 * @param uploadFile
	 *            被上传的文件
	 * @return newFileName
	 */
	public static String upload(String uploadFileName, String savePath, FormFile uploadFile) {
		String newFileName = getUUIDName(uploadFileName, savePath);
		FileOutputStream fos = null;
		InputStream fis = null;
		try {
			fos = new FileOutputStream(savePath + newFileName);
			fis = uploadFile.getInputStream();
			byte[] buffer = new byte[1024];
			int len = 0;
			while ((len = fis.read(buffer)) > 0) {
				fos.write(buffer, 0, len);
			}
		} catch (FileNotFoundException e) {
			e.printStackTrace();
		} catch (IOException e) {
			e.printStackTrace();
		}finally{
			try {
				fos.close();
				fis.close();
			} catch (IOException e) {
				e.printStackTrace();
			}
		}
		return newFileName;
	}

	public static String getUUIDName(String fileName, String dir) {
		String[] split = fileName.split("\\.");
		String extendFile = "." + split[split.length - 1].toLowerCase();
		return java.util.UUID.randomUUID().toString() + extendFile;
	}

	/**
	 * 根据路径创建一系列的目录
	 * 
	 * @param path
	 */
	public static boolean mkDirectory(String path) {
		File file = null;
		try {
			file = new File(path);
			if (!file.exists()) {
				return file.mkdirs();
			}
		} catch (RuntimeException e) {
			e.printStackTrace();
		} finally {
			file = null;
		}
		return false;
	}

}

 

最后附上解决方案:

首先后台的response注意使用text/plain而不要使用text/html或者text/xml 

response.setContentType("text/plain;charset=utf-8");
 

然后修改ext-all.js中以下代码:

 doDecode = function(json){
               //加入部分begin
	        if(json.indexOf('<pre>') != -1 || json.indexOf('<PRE>') != -1 ){
	            json = json.replace('<pre>','').replace('<PRE>','').replace('</pre>','').replace('</PRE>','');
	        }
              //加入部分end
	        return eval("(" + json + ')');    
            
        }

 纯粹个人意见，刚接触ext有不足之处请大家多多指点，还有哪位有更好的解决方法也请说下，请教了！

8
顶
1
踩
分享到：
| EXT 3.x 使用详解之Ext.Viewport综合使用( ...
评论
4 楼 jsczxy2 2011-06-23  
scnu_lts 写道
我也碰到这个问题 很奇怪 但是我解决了 而且没你的这么复杂 还要改源码
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
out.write(json);
JsonUtil.jsonFailResponse("上传失败，请与管理员联系！", request, response);

用setContentType("text/html;charset=UTF-8")

之前那个是application/x-json 直接下载了 用这个就没问题 具体原因待查 哪个高人也可以给个解释


text/html 我早用过了 某些情况下是不行的 你可以多试试
3 楼 scnu_lts 2011-05-05  
我也碰到这个问题 很奇怪 但是我解决了 而且没你的这么复杂 还要改源码
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
out.write(json);
JsonUtil.jsonFailResponse("上传失败，请与管理员联系！", request, response);

用setContentType("text/html;charset=UTF-8")

之前那个是application/x-json 直接下载了 用这个就没问题 具体原因待查 哪个高人也可以给个解释
2 楼 jsczxy2 2010-04-10  
xiaoshaolong 写道
我刚刚碰到这个问题，浪费了几个小时，官网上也有相同的问题，也是没有解决。
照你的方法修改了，可以了。
谢谢

不客气 有问题大家交流才能进步
1 楼 xiaoshaolong 2010-04-10  
我刚刚碰到这个问题，浪费了几个小时，官网上也有相同的问题，也是没有解决。
照你的方法修改了，可以了。
谢谢
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    文件上传控件fileupload

    ### 文件上传控件FileUpload知识点详解 #### 一、FileUpload控件简介 在Web开发中，文件上传是一项常见的功能需求。ASP.NET提供了内置的`FileUpload`控件来简化文件上传的操作流程。该控件允许用户选择一个或多个...

    extjs-form组件配置参数详解

    ### extjs-form组件配置参数详解 #### 一、Ext.form.Action `Ext.form.Action`是ExtJS中的一个类，用于处理表单提交和加载数据的动作。它提供了多种配置选项和属性来控制表单操作的过程。 **配置项** - **success*...

    SSH2上传实现

    ### SSH2上传实现详解 #### 一、概述 在现代Web开发中，文件上传是常见的需求之一。本文将详细介绍如何利用SSH2（Struts2 + Spring + Hibernate）框架结合ExtJS前端库实现文件上传功能。具体包括前端界面设计、...

    extjs属性方法大全

    ### Extjs 属性方法详解 #### 一、`Ext.form.Action` 类 `Ext.form.Action` 是用于处理表单操作的类，主要包括提交和加载数据的功能。 - **属性：** - `success`: 表示操作成功时的回调函数。 - `failure`: ...

    一个基于Jsp+ext无刷新图片上传例子源码

    你可以使用诸如Apache Commons FileUpload库来解析请求并保存上传的图片。此外，后端还需要处理错误，如文件大小限制、文件类型检查等。 6. **文件存储**：上传的图片会被保存在服务器的某个目录下，可能需要设定...

    一个JSP网盘（运用Struts+Ext上传技术）

    在Struts框架下，通常使用`&lt;form&gt;`标签的`enctype="multipart/form-data"`属性来支持文件上传，配合Struts的`File`和`FileUpload`组件处理文件流。在服务器端，会将上传的文件保存到指定的目录，并记录相关信息。 5...

    基于servlet的多文件上传

    本文将详细介绍一个基于Servlet的多文件上传示例，该示例使用了Apache Commons FileUpload库来简化文件上传过程。下面将从以下几个方面进行详细解释： 1. **环境配置与依赖** 2. **ServletFileUpload类简介** 3. **...

    asp.net上传图片

    3. **FileReader API**：现代浏览器提供的API，可以读取用户选择的文件内容。 4. **Base64编码**：一种将二进制数据转换为文本字符串的标准方法，在本例中用于显示本地文件。 #### 三、实现过程详解 ##### 1. 页面...

    springmvc的文件保存方法详解

    该方法需要使用`@RequestParam`注解来接收上传的文件，并调用`MultipartFile`接口提供的方法来获取文件内容并保存到服务器。以下是一个简单的示例： ```java import org.springframework.stereotype.Controller; ...

    相册管理系统(Java表单+xml数据库存储).doc

    表单提交后，通过POST方法将数据发送到`UploadServlet`，这里使用了Apache Commons FileUpload库来处理多部分请求，将上传的文件保存到服务器的指定目录，并将相关信息存入XML数据库。 2. 文件下载：用户可以浏览...

Magicbox
Global site tag (gtag.js) - Google Analytics