ExtJS FormPanel 업로드

ExtJS 업로드 구성 요소 중 FormPanel은 업로드를 쉽게 수행할 수 있습니다.프로젝트에서 단일 파일 업로드를 실천하는 것이 비교적 간단하다
다음은 내가 이 컨트롤의 부분으로 꺼낸 부분 코드입니다.

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">    
    <title> </title>
	<link rel="stylesheet" type="text/css" href="./upload/extjs/resources/css/ext-all.css">
	<link rel="stylesheet" type="text/css" href="./upload/extjs/UploadDialog/css/Ext.ux.UploadDialog.css">		
	<script type="text/javascript" src="./upload/extjs/ext-base.js"></script>
	<script type="text/javascript" src="./upload/extjs/ext-all.js"></script>
	<script type="text/javascript" src="./upload/extjs/ext-lang-zh_CN.js"></script>
	<script type="text/javascript" src="./upload/extjs/UploadDialog/UploadDialog.js"></script>
  </head>
  
 
  <body>
  	<script type="text/javascript">
  	
  	var uploadForm = new Ext.form.FormPanel({
	  			id:'upload_form',
				labelAlign:'right',
				frame:true,
				height:100,
				width:380,
				fileUpload:true,
				items:[{
					id:'fileUploadPath',
					xtype:'textfield',
					width:260,
					height:20,
					fieldLabel:' ',
					name:'files', // 
					inputType:'file'
				}],
				buttons:[{
					text:' ',
					handler:function(){
						var path = Ext.getCmp('fileUploadPath').getValue();
						//path = './json/upload_filesUpload.action?files=' + path;
						//path = path.replace(/\\/g,'$');
						if(uploadForm.getForm().isValid()){
							//uploadForm.getForm().url = path;
							uploadForm.getForm().url = './json/upload_filesUpload.action';
							uploadForm.getForm().submit({
								waitMsg: ' ...',
								//ajax 
								success:function(){
									/*
									var conn = new Ext.data.Connection();
									conn.request({//  
										url : './Food/foodSchool_importReport.action',
										method : 'POST',// 
										params : {
											'path' : path
										},
										success : function(rsp, opt) {
										// ， AJAX excel ， 
										//......
										},
										failure : function(rsp, opt) {
											Ext.Msg.alert(' ', ' ， Excel !');
										}
									});
									win2.hide();
									*/
									Ext.Msg.alert(' ',' ！ ');
									win2.hide();
								},
								failure:function(){
									Ext.Msg.alert(' ',' ！');
								}
							});
						}
					}
				}]
			});
			
			var btn2 = new Ext.Button({
				text:' ',
				handler:function(){
					win2 = new Ext.Window({
						id:'uploadFile2',
						title:' ',
						modal:true,
						width:400,
						height:150,
						closeAction:'hide',
						layout:'fit',
						resizable:false,
						items:uploadForm 
					});
					win2.show();
				}
			});
  	
  		Ext.onReady(function() { 			
			var viewport = new Ext.Viewport({
				//layout : 'border',
				split : true,
				items:[btn2]
			});
  		})
  	</script>
  </body>
</html>

백그라운드 코드의 시간은 내가 전에 쓴 문장을 참조하십시오. 거기에 상세한 설명이 있습니다.
http://lizhenbin2010.iteye.com/blog/1136611

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

ExtJS column 레이아웃 후 labelField에 표시되지 않는 문제

처음 Extjs의column 레이아웃을 사용할 때 많은 문제를 만났습니다. 기록하여 참고하시기 바랍니다.column 레이아웃에서 label이 표시되지 않거나 컨트롤이 위치를 잘못 표시하는 등 자주 볼 수 있습니다. ...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

ExtJS FormPanel 업로드

좋은 웹페이지 즐겨찾기