ExtJs文件上传例子

Extjs里文件上传需要扩展的组件，自己在做extjs例子，没有什么好的方法，网上找的也有很多不同的方法，我用的是Ext.ux.UploadDialog。
在文件里引用

xml 代码

<script type="text/javascript" src="lib/extjs.ux/Ext.ux.UploadDialog.js" ></script>
<script type="text/javascript" src="lib/extjs.ux/Ext.ux.ProgressBar.js" ></script>
<link rel="stylesheet" type="text/css" href="css/Ext.ux.ProgressBar.css"/>
<link rel="stylesheet" type="text/css" href="css/Ext.ux.UploadDialog.css"/>

然后在js的代码里加入：

js 代码

var dialog = new Ext.ux.UploadDialog.Dialog(null, {
          autoCreate: true,
          closable: true,
          collapsible: false,
          draggable: true,
          minWidth: 400,
          minHeight: 200,
          width: 400,
          height: 350,
          permitted_extensions:['JPG','jpg','jpeg','JPEG','GIF','gif'],
          proxyDrag: true,
          resizable: true,
          constraintoviewport: true,
          title: '文件上传',
          url: 't_file_upload.php',
          reset_on_hide: false,
          allow_close_on_upload: true
        });

在上传按钮单击时弹出上传对话框：

js 代码

btnUpload.on("click",function(){
                        dialog.show();
                    });

下面要做的事情就是在t_file_upload.php这个文件里面来处理上传后的操作了：

java 代码

<?php
    $file = "";
    $result = array();
    $ext = strrchr($_FILES["file"]["name"],'.');
    $file = "". date("YmdHis") . $ext;
    if(move_uploaded_file($_FILES["file"]["tmp_name"],"images/upload/" . $file)){
        $result = array('success'=>true,data=>$file);
    }else{
        $result = array('success'=> false, 'error'=> '文件上传错误');
    }
    echo json_encode($result);
?>

上传文件的内容就是file，是规定好的：）
附件中上传的是组件库

评论

16 楼 javaAlpha 2009-11-14  

遇到一个类似的上传是需求

15 楼 lusiyang 2009-04-03  

为什么fileItems空而request里有值啊

14 楼 wwwtd 2008-09-15  

action.result is undefined 一直报这个错误该如何解决呢？

13 楼 sailer 2008-07-22  

t_file_upload.php这个文件的内容正确吗？它从哪里获得参数和值？

12 楼 shan_gogo 2008-05-29  

楼主 我想问下 这个Ext上传用的是1.x还是2.x???

我从Ext官方下载的Upload工具包里怎么只有
<script type="text/javascript" src="uploadDialog/Ext.ux.UploadDialog.js"></script>
<link rel="stylesheet" type="text/css" href="uploadDialog/css/Ext.ux.UploadDialog.css" />
没有其他的???
请指教

11 楼 kayzhan 2008-05-21  

我按楼主的写的，结果总是说找不到dialog，说dialog没有定义。而我确实引入了那些文件阿

<script type="text/javascript" src="uploadDialog/Ext.ux.ProgressBar.js"></script>
<script type="text/javascript" src="uploadDialog/Ext.ux.UploadDialog.js"></script>
<script type="text/javascript" src="uploadDialog/uploadDialog.js"></script>
<link rel="stylesheet" type="text/css" href="uploadDialog/css/Ext.ux.UploadDialog.css" />
<link rel="stylesheet" type="text/css" href="uploadDialog/css/Ext.ux.ProgressBar.css" />

uploadDialog.js里写的是
var dialog = new Ext.ux.UploadDialog.Dialog(null, { 
        autoCreate: true, 
        closable: true, 
        collapsible: false, 
        draggable: true, 
        minWidth: 400,       
        minHeight: 200, 
        width: 400, 
        height: 350, 
        permitted_extensions:['JPG','jpg','jpeg','JPEG','GIF','gif'], 
        proxyDrag: true, 
        resizable: true, 
        constraintoviewport: true, 
        title: '文件上传', 
        url: 'servlet/ServletUpload', 
        reset_on_hide: false, 
        allow_close_on_upload: true 
    }); 

然后我在一个按钮里写
handler: function(){
             dialog.show();
             }
结果说dialog没有定义，怎么回事呢？

10 楼 kaki 2008-03-24  

我的已经解决了，主要是要注意servlet的命名和路径不要和其他应用重复，上面的方法可以通过。

9 楼 kaki 2008-03-24  

我的方法直接使用楼主的方法还是不能通过啊。好像根本不能提交数据一样。

8 楼 hqmln422150393 2008-03-23  

为什么我的页面都出不来啊？

7 楼 kaki 2008-03-21  

servlet:

package com.hiber;

import java.io.File;
import java.io.IOException;
import java.sql.Timestamp;
import java.text.SimpleDateFormat;
import java.util.Iterator;
import java.util.List;

import javax.servlet.*;
import javax.servlet.http.*;
import org.apache.commons.fileupload.*;

public class Upload extends HttpServlet {
	/**
	 * 
	 */
	private static final long serialVersionUID = 7440302204266787092L;

	String uploadPath = "d:\\uploadtest\\"; // 用于存放上传文件的目录

	String tempPath = "d:\\tmp\\"; // 用于存放临时文件的目录

	public Upload() {
		super();
		System.out.println("文件上传启动");
	}

	public void destroy() {
		super.destroy(); // Just puts "destroy" string in log
		// Put your code here
	}

	public void init() throws ServletException {
		System.out.println("文件上传初始化");
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws IOException, ServletException {
		try {
			System.out.println("开始进行文件上传");
			DiskFileUpload fu = new DiskFileUpload();
			fu.setSizeMax(4194304); // 设置最大文件尺寸，这里是4MB
			fu.setSizeThreshold(4096); // 设置缓冲区大小，这里是4kb
			fu.setRepositoryPath(tempPath); // 设置临时目录
			List fileItems = fu.parseRequest(request); // 得到所有的文件：
			Iterator i = fileItems.iterator();
			// 依次处理每一个文件：
			while (i.hasNext()) {
				FileItem fi = (FileItem) i.next();
				String fileName = fi.getName();// 获得文件名，这个文件名包括路径：
				if (fileName != null) {
					// 在这里可以记录用户和文件信息
					// 此处应该定义一个接口（CallBack），用于处理后事。
					// 写入文件a.txt，你也可以从fileName中提取文件名：
					String extfile = fileName.substring(fileName.indexOf("."));
					
					Timestamp now = new Timestamp((new java.util.Date())
							.getTime());

	                 SimpleDateFormat   fmt   =   new   SimpleDateFormat("yyyyMMddHHmmssSSS");   
	                String  pfileName=   fmt.format(now).toString().trim();   
					System.out.println(uploadPath+pfileName+extfile);
					fi.write(new File(uploadPath + pfileName + extfile));
				}
			}
			response.setContentType("text/html;charset=utf-8");
			response.getWriter().print("{success:true,message:'上传成功'}");

			//response.getWriter().print("{success:true,msg:'成功'}");
			// 跳转到上传成功提示页面
		} catch (Exception e) {
			e.printStackTrace();
			response.getWriter().print("{success:flase,message:'失败'}");
			// 可以跳转出错页面
		}

	}
}

6 楼 kaki 2008-03-21  

servlet 大家用过吗？？

我的serlet在jsp里面可以正常用，但是放在楼主的例子里面就不行了，大家看看可以吗？？

Ext.onReady(function() {

	var dialog = new Ext.ux.UploadDialog.Dialog(null, {
          autoCreate: true,   
          closable: true,   
          collapsible: false,   
          draggable: true,   
          minWidth: 400,         
          minHeight: 200,   
          width: 400,   
          height: 350,   
          permitted_extensions:['JPG','jpg','jpeg','JPEG','GIF','gif'],   
          proxyDrag: true,   
          resizable: true,   
          constraintoviewport: true,   
          title: '文件上传',   
          url: "fileupload",   
          reset_on_hide: false,   
          allow_close_on_upload: true 
	});
	dialog.show('my-dlg');

});

5 楼 kaki 2008-03-19  

java 版的有没有？？？

4 楼 sariy 2008-03-17  

请问java后台怎么接文件啊 搞了好久接不到啊 
谢谢  qq:121656995
email:[e-mail]

3 楼 zjnbshifox 2008-03-05  

Uploadform还有base_params这个属性可以用来添加额外的参数
http://www.max-bazhenov.com/dev/upload-dialog-2.0/index.php

2 楼 zjnbshifox 2008-03-05  

t_file_upload.php？filepath=icon/ 这个样子参数应该从 $_GET["filepath"]取得吧，

1 楼 hongfulover 2008-03-02  

请教一下："images/upload/"，你这个上传是路径是写了，如果我需要从上传页传一个路径可以怎么做？我试过用t_file_upload.php？filepath=icon/,不行的。