extjs实现文件上传

ext的官方网站有许多大侠写了许多狠牛的上传控件，但是功能太炫，我感觉反而不适用！效果如下 上传完了之后地址会加载到上传内容这个文本框里面 里面还做了类型判断，用于上传文本和相片代码如下，把一下代码封装在一个js文件里面

Jscript代码  

1. //*****************************************上传的公共js***************************************************************//   
2.   
3. /**  
4.  
5.  * 约定:types为调用时传来的参数.形式为jsp-gig-png  
6.  
7.  *      uploadid为上传后要填充路径的控件id  
8.  
9.  *      上传的属性均为upload  
10.  
11.  * 功能:页面调用openUpload("","");方法即可  
12.  
13.  */  
14.   
15. //...允许上传的后缀名   
16.   
17. var types = "";   
18.   
19.   
20.   
21. //...上传后填充控件的id   
22.   
23. var uploadid = "";   
24.   
25.   
26.   
27. function openUpload(type,id){   
28.   
29.     types = type;   
30.   
31.     uploadid = id;   
32.   
33.     winUpload.show();   
34.   
35.   }   
36.   
37.   
38.   
39. var formUpload = new Ext.form.FormPanel({   
40.   
41.     baseCls: 'x-plain',   
42.   
43.     labelWidth: 80,   
44.   
45.     fileUpload:true,   
46.   
47.     defaultType: 'textfield',   
48.   
49.     items: [{   
50.   
51.       xtype: 'textfield',   
52.   
53.       fieldLabel: '文 件',   
54.   
55.       name: 'upload',   
56.   
57.       inputType: 'file',   
58.   
59.       allowBlank: false,   
60.   
61.       blankText: '请上传文件',   
62.   
63.       anchor: '90%'  // anchor width by percentage   
64.   
65.     }]   
66.   
67.   });   
68.   
69.   
70.   
71. var winUpload = new Ext.Window({   
72.   
73.     title: '资源上传',   
74.   
75.     width: 400,   
76.   
77.     height:200,   
78.   
79.     minWidth: 300,   
80.   
81.     minHeight: 100,   
82.   
83.     layout: 'fit',   
84.   
85.     plain:true,   
86.   
87.     bodyStyle:'padding:5px;',   
88.   
89.     buttonAlign:'center',   
90.   
91.     items: formUpload,   
92.   
93.     buttons: [{   
94.   
95.       text: '上 传',   
96.   
97.       handler: function() {   
98.   
99.         if(formUpload.form.isValid()){   
100.   
101.           Ext.MessageBox.show({   
102.   
103.                title: 'Please wait',   
104.   
105.                msg: 'Uploading...',   
106.   
107.                progressText: '',   
108.   
109.                width:300,   
110.   
111.                progress:true,   
112.   
113.                closable:false,   
114.   
115.                animEl: 'loding'  
116.   
117.              });   
118.   
119.           formUpload.getForm().submit({       
120.   
121.             url:'uploadAction.action?types='+types,   
122.   
123.             success: function(form, action){   
124.   
125.                var objxzdz = Ext.get(uploadid).dom;   
126.   
127.                var value = action.result.msg;   
128.   
129.                objxzdz.value = value;   
130.   
131.                Ext.Msg.alert('成功','上传成功.');   
132.   
133.                winUpload.hide();     
134.   
135.             },       
136.   
137.              failure: function(form, action){       
138.   
139.               //... action生成的json{msg:上传失败},页面就可以用action.result.msg得到非常之灵活   
140.   
141.               Ext.Msg.alert('Error', action.result.msg);       
142.   
143.              }   
144.   
145.           })              
146.   
147.         }   
148.   
149.        }   
150.   
151.     },{   
152.   
153.       text: '取 消',   
154.   
155.       handler:function(){winUpload.hide();}   
156.   
157.     }]   
158.   
159.   });   
160.   
161. //*****************************************上传的公共js***************************************************************//   
162.   
163. 现在已经封装完毕了，我们看看在页面上如何调用   
164. openUpload("txt-xls-doc-docs-pds","xzdzid");   
165. 就这一句话，嘿嘿，简单吧？第一个参数为允许上传的类型，第二个参数为上传后地址要绑定到哪个控件（是该控件的id）   
166.   
167. action的代码还是贴下吧   
168. <PRE class=java name="code">import java.io.File;   
169.   
170. import java.io.FileInputStream;   
171.   
172. import java.io.FileOutputStream;   
173.   
174.   
175.   
176. import org.apache.struts2.ServletActionContext;   
177.   
178.   
179.   
180. import net.ask123.ecommerce.common.util.Common;   
181.   
182. import net.ask123.ecommerce.common.util.Constants;   
183.   
184. import net.ask123.ecommerce.common.util.FileOperate;   
185.   
186. import net.ask123.ecommerce.common.util.VeDate;   
187.   
188.   
189.   
190. /**  
191.  
192.  * 上传的公共方法  
193.  
194.  *   
195.  
196.  * @author sam.zhang  
197.  
198.  *   
199.  
200.  */  
201.   
202. public class UploadAction extends ExtJsonActionSuport {   
203.   
204.   
205.   
206.     /**  
207.  
208.      *   
209.  
210.      */  
211.   
212.     private static final long serialVersionUID = 1L;   
213.   
214.   
215.         //和前台的名字一样，这里约定是 upload   
216.         private File upload;   
217.   
218.   
219.   
220.     private String uploadContentType;   
221.   
222.   
223.   
224.     private String uploadFileName;   
225.   
226.   
227.   
228.     private String savePath;   
229.   
230.   
231.   
232.     // 存放允许上传的后缀名   
233.   
234.     private String types;   
235.   
236.   
237.   
238.     public String getSavePath() {   
239.   
240.         return savePath;   
241.   
242.     }   
243.   
244.   
245.   
246.     public void setSavePath(String savePath) {   
247.   
248.         this.savePath = savePath;   
249.   
250.     }   
251.   
252.   
253.   
254.     public File getUpload() {   
255.   
256.         return upload;   
257.   
258.     }   
259.   
260.   
261.   
262.     public void setUpload(File upload) {   
263.   
264.         this.upload = upload;   
265.   
266.     }   
267.   
268.   
269.   
270.     public String getUploadContentType() {   
271.   
272.         return uploadContentType;   
273.   
274.     }   
275.   
276.   
277.   
278.     public void setUploadContentType(String uploadContentType) {   
279.   
280.         this.uploadContentType = uploadContentType;   
281.   
282.     }   
283.   
284.   
285.   
286.     public String getUploadFileName() {   
287.   
288.         return uploadFileName;   
289.   
290.     }   
291.   
292.   
293.   
294.     public void setUploadFileName(String uploadFileName) {   
295.   
296.         this.uploadFileName = uploadFileName;   
297.   
298.     }   
299.   
300.   
301.   
302.     public String getTypes() {   
303.   
304.         return types;   
305.   
306.     }   
307.   
308.   
309.   
310.     public void setTypes(String types) {   
311.   
312.         this.types = types;   
313.   
314.     }   
315.   
316.   
317.   
318.     @SuppressWarnings("deprecation")   
319.   
320.     public String execute() throws Exception {   
321.   
322.         String msg = "";   
323.   
324.         FileOperate fo = new FileOperate();   
325.   
326.   
327.   
328.         String sid = VeDate.getNo(4);   
329.   
330.   
331.   
332.         this.savePath = "/updownFiles";   
333.   
334.   
335.   
336.         try {   
337.   
338.   
339.   
340.             // ...获取文件后缀名   
341.   
342.             String ext = fo.getFileExt(getUploadFileName());   
343.   
344.   
345.   
346.             if ("".equals(this.types)   
347.   
348.                     || Common.indexofString(this.types, "-") == -1) {   
349.   
350.                 msg = "上传失败";   
351.   
352.                 this.setJsonString("{success:false,msg:'" + msg + "'}");   
353.   
354.                 return SUCCESS;   
355.   
356.             }   
357.   
358.   
359.   
360.             // ...判断上传的文件是否合法   
361.   
362.             boolean istrue = FileOperate.trueExt(this.types.split("-"), ext);   
363.   
364.             if (!istrue) {   
365.   
366.                 msg = "您上传的文件格式不正确，正确格式为" + this.types;   
367.   
368.                 this.setJsonString("{success:false,msg:'" + msg + "'}");   
369.   
370.                 return SUCCESS;   
371.   
372.             }   
373.   
374.   
375.   
376.             // ...文件存放的位置   
377.   
378.             String sPath = ServletActionContext.getRequest().getRealPath(   
379.   
380.                     this.getSavePath())   
381.   
382.                     + Constants.FILESPARA   
383.   
384.                     + sid.substring(0, 4)   
385.   
386.                     + Constants.FILESPARA   
387.   
388.                     + sid.substring(4, 6)   
389.   
390.                     + Constants.FILESPARA;   
391.   
392.   
393.   
394.             // ...保存在数据库的路径   
395.   
396.             String filePath = this.savePath + "/" + sid.substring(0, 4) + "/"  
397.   
398.                     + sid.substring(4, 6) + "/" + sid + "." + ext;   
399.   
400.   
401.   
402.             // 如果目录不存在则创建它   
403.   
404.   
405.   
406.             fo.createFolder(sPath);   
407.   
408.   
409.   
410.             FileOutputStream fileOutputStream = new FileOutputStream(sPath   
411.   
412.                     + sid + "." + ext);   
413.   
414.   
415.   
416.             FileInputStream fileInputStream = new FileInputStream(getUpload());   
417.   
418.             // ...   
419.   
420.             byte[] buffer = new byte[1024];   
421.   
422.             int len = 0;   
423.   
424.             while ((len = fileInputStream.read(buffer)) > 0) {   
425.   
426.                 fileOutputStream.write(buffer, 0, len);   
427.   
428.             }   
429.   
430.             this.setJsonString("{success:true,msg:'" + filePath + "'}");   
431.   
432.         } catch (Exception e) {   
433.   
434.             this.setJsonString("{success:false}");   
435.   
436.             e.printStackTrace();   
437.   
438.         }   
439.   
440.         return SUCCESS;   
441.   
442.     }   
443.   
444.   
445.   
446. }   
447.   
448. </PRE>   
449. 这里就大致贴贴一下吧，如果看不懂的话把struts2学习下就ok了，这里不一定后台一定是java的，  

//*****************************************上传的公共js***************************************************************//

/**

 * 约定:types为调用时传来的参数.形式为jsp-gig-png

 *      uploadid为上传后要填充路径的控件id

 *      上传的属性均为upload

 * 功能:页面调用openUpload("","");方法即可

 */

//...允许上传的后缀名

var types = "";



//...上传后填充控件的id

var uploadid = "";



function openUpload(type,id){

  	types = type;

	uploadid = id;

  	winUpload.show();

  }



var formUpload = new Ext.form.FormPanel({

    baseCls: 'x-plain',

    labelWidth: 80,

    fileUpload:true,

    defaultType: 'textfield',

    items: [{

      xtype: 'textfield',

      fieldLabel: '文 件',

      name: 'upload',

      inputType: 'file',

      allowBlank: false,

      blankText: '请上传文件',

      anchor: '90%'  // anchor width by percentage

    }]

  });



var winUpload = new Ext.Window({

    title: '资源上传',

    width: 400,

    height:200,

    minWidth: 300,

    minHeight: 100,

    layout: 'fit',

    plain:true,

    bodyStyle:'padding:5px;',

    buttonAlign:'center',

    items: formUpload,

    buttons: [{

      text: '上 传',

      handler: function() {

        if(formUpload.form.isValid()){

          Ext.MessageBox.show({

               title: 'Please wait',

               msg: 'Uploading...',

               progressText: '',

               width:300,

               progress:true,

               closable:false,

               animEl: 'loding'

             });

          formUpload.getForm().submit({    

		    url:'uploadAction.action?types='+types,

            success: function(form, action){

			   var objxzdz = Ext.get(uploadid).dom;

			   var value = action.result.msg;

			   objxzdz.value = value;

               Ext.Msg.alert('成功','上传成功.');

               winUpload.hide();  

            },    

             failure: function(form, action){    

			  //... action生成的json{msg:上传失败},页面就可以用action.result.msg得到非常之灵活

              Ext.Msg.alert('Error', action.result.msg);    

             }

          })           

        }

       }

    },{

      text: '取 消',

      handler:function(){winUpload.hide();}

    }]

  });

//*****************************************上传的公共js***************************************************************//

现在已经封装完毕了，我们看看在页面上如何调用
openUpload("txt-xls-doc-docs-pds","xzdzid");
就这一句话，嘿嘿，简单吧？第一个参数为允许上传的类型，第二个参数为上传后地址要绑定到哪个控件（是该控件的id）

action的代码还是贴下吧

 
 

  
  

   
   

    
    Java代码 
    
     
    
    
   
   
  
  
  
  
import java.io.File;   
  
import java.io.FileInputStream;   
  
import java.io.FileOutputStream;   
  
  
  
import org.apache.struts2.ServletActionContext;   
  
  
  
import net.ask123.ecommerce.common.util.Common;   
  
import net.ask123.ecommerce.common.util.Constants;   
  
import net.ask123.ecommerce.common.util.FileOperate;   
  
import net.ask123.ecommerce.common.util.VeDate;   
  
  
  
/**  
 
 * 上传的公共方法  
 
 *   
 
 * @author sam.zhang  
 
 *   
 
 */  
  
public class UploadAction extends ExtJsonActionSuport {   
  
  
  
    /**  
 
     *   
 
     */  
  
    private static final long serialVersionUID = 1L;   
  
  
        //和前台的名字一样，这里约定是 upload   
        private File upload;   
  
  
  
    private String uploadContentType;   
  
  
  
    private String uploadFileName;   
  
  
  
    private String savePath;   
  
  
  
    // 存放允许上传的后缀名   
  
    private String types;   
  
  
  
    public String getSavePath() {   
  
        return savePath;   
  
    }   
  
  
  
    public void setSavePath(String savePath) {   
  
        this.savePath = savePath;   
  
    }   
  
  
  
    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;   
  
    }   
  
  
  
    public String getTypes() {   
  
        return types;   
  
    }   
  
  
  
    public void setTypes(String types) {   
  
        this.types = types;   
  
    }   
  
  
  
    @SuppressWarnings("deprecation")   
  
    public String execute() throws Exception {   
  
        String msg = "";   
  
        FileOperate fo = new FileOperate();   
  
  
  
        String sid = VeDate.getNo(4);   
  
  
  
        this.savePath = "/updownFiles";   
  
  
  
        try {   
  
  
  
            // ...获取文件后缀名   
  
            String ext = fo.getFileExt(getUploadFileName());   
  
  
  
            if ("".equals(this.types)   
  
                    || Common.indexofString(this.types, "-") == -1) {   
  
                msg = "上传失败";   
  
                this.setJsonString("{success:false,msg:'" + msg + "'}");   
  
                return SUCCESS;   
  
            }   
  
  
  
            // ...判断上传的文件是否合法   
  
            boolean istrue = FileOperate.trueExt(this.types.split("-"), ext);   
  
            if (!istrue) {   
  
                msg = "您上传的文件格式不正确，正确格式为" + this.types;   
  
                this.setJsonString("{success:false,msg:'" + msg + "'}");   
  
                return SUCCESS;   
  
            }   
  
  
  
            // ...文件存放的位置   
  
            String sPath = ServletActionContext.getRequest().getRealPath(   
  
                    this.getSavePath())   
  
                    + Constants.FILESPARA   
  
                    + sid.substring(0, 4)   
  
                    + Constants.FILESPARA   
  
                    + sid.substring(4, 6)   
  
                    + Constants.FILESPARA;   
  
  
  
            // ...保存在数据库的路径   
  
            String filePath = this.savePath + "/" + sid.substring(0, 4) + "/"  
  
                    + sid.substring(4, 6) + "/" + sid + "." + ext;   
  
  
  
            // 如果目录不存在则创建它   
  
  
  
            fo.createFolder(sPath);   
  
  
  
            FileOutputStream fileOutputStream = new FileOutputStream(sPath   
  
                    + sid + "." + ext);   
  
  
  
            FileInputStream fileInputStream = new FileInputStream(getUpload());   
  
            // ...   
  
            byte[] buffer = new byte[1024];   
  
            int len = 0;   
  
            while ((len = fileInputStream.read(buffer)) > 0) {   
  
                fileOutputStream.write(buffer, 0, len);   
  
            }   
  
            this.setJsonString("{success:true,msg:'" + filePath + "'}");   
  
        } catch (Exception e) {   
  
            this.setJsonString("{success:false}");   
  
            e.printStackTrace();   
  
        }   
  
        return SUCCESS;   
  
    }   
  
  
  
}  
 
 
import java.io.File;

import java.io.FileInputStream;

import java.io.FileOutputStream;



import org.apache.struts2.ServletActionContext;



import net.ask123.ecommerce.common.util.Common;

import net.ask123.ecommerce.common.util.Constants;

import net.ask123.ecommerce.common.util.FileOperate;

import net.ask123.ecommerce.common.util.VeDate;



/**

 * 上传的公共方法

 * 

 * @author sam.zhang

 * 

 */

public class UploadAction extends ExtJsonActionSuport {



	/**

	 * 

	 */

	private static final long serialVersionUID = 1L;


        //和前台的名字一样，这里约定是 upload
        private File upload;



	private String uploadContentType;



	private String uploadFileName;



	private String savePath;



	// 存放允许上传的后缀名

	private String types;



	public String getSavePath() {

		return savePath;

	}



	public void setSavePath(String savePath) {

		this.savePath = savePath;

	}



	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;

	}



	public String getTypes() {

		return types;

	}



	public void setTypes(String types) {

		this.types = types;

	}



	@SuppressWarnings("deprecation")

	public String execute() throws Exception {

		String msg = "";

		FileOperate fo = new FileOperate();



		String sid = VeDate.getNo(4);



		this.savePath = "/updownFiles";



		try {



			// ...获取文件后缀名

			String ext = fo.getFileExt(getUploadFileName());



			if ("".equals(this.types)

					|| Common.indexofString(this.types, "-") == -1) {

				msg = "上传失败";

				this.setJsonString("{success:false,msg:'" + msg + "'}");

				return SUCCESS;

			}



			// ...判断上传的文件是否合法

			boolean istrue = FileOperate.trueExt(this.types.split("-"), ext);

			if (!istrue) {

				msg = "您上传的文件格式不正确，正确格式为" + this.types;

				this.setJsonString("{success:false,msg:'" + msg + "'}");

				return SUCCESS;

			}



			// ...文件存放的位置

			String sPath = ServletActionContext.getRequest().getRealPath(

					this.getSavePath())

					+ Constants.FILESPARA

					+ sid.substring(0, 4)

					+ Constants.FILESPARA

					+ sid.substring(4, 6)

					+ Constants.FILESPARA;



			// ...保存在数据库的路径

			String filePath = this.savePath + "/" + sid.substring(0, 4) + "/"

					+ sid.substring(4, 6) + "/" + sid + "." + ext;



			// 如果目录不存在则创建它



			fo.createFolder(sPath);



			FileOutputStream fileOutputStream = new FileOutputStream(sPath

					+ sid + "." + ext);



			FileInputStream fileInputStream = new FileInputStream(getUpload());

			// ...

			byte[] buffer = new byte[1024];

			int len = 0;

			while ((len = fileInputStream.read(buffer)) > 0) {

				fileOutputStream.write(buffer, 0, len);

			}

			this.setJsonString("{success:true,msg:'" + filePath + "'}");

		} catch (Exception e) {

			this.setJsonString("{success:false}");

			e.printStackTrace();

		}

		return SUCCESS;

	}



}

这里就大致贴贴一下吧，如果看不懂的话把struts2学习下就ok了，这里不一定后台一定是java的，

关键是 

 
 


  
  


   
   

    
    Jscript代码 
    
    
 
    
    
   
   

  
  

  
  
url:'uploadAction.action?types='+types,这里会指定后台的请求地址