extjs文件上傳功能

⑴ extjs ajax 可以上傳文件嗎

文件上傳的Ajax，首先Ajax並不支持流的傳輸，只是在裡面套了個iframe。

//ajax上傳
Ext.get('btn').on('click',function(){
Ext.Ajax.request({
url:'Upload.php',
isUpload:true,
form:'upform',
success:function(){
Ext.Msg.alert('upfile','文件上傳成功！');
}
});
});

<formid="upform">
請選擇文件：<inputtype="file"name="imgFile"/>
<inputtype="button"id="btn"value="上傳"/>
</form>

<?php
if(!isset($_FILES['imgFile'])){
	echojson_encode(array("success"=>false,'msg'=>"NotgetImgfile"));
	return;
}
$upfile=$_FILES['imgFile'];
$name=$upfile["name"];//上傳文件的文件名
$type=$upfile["type"];//上傳文件的類型
$size=$upfile["size"];//上傳文件的大小
$tmp_name=$upfile["tmp_name"];//上傳文件的臨時存放路徑
$error_cod=$upfile["error"];
if($error_cod>0){
	echojson_encode(array("success"=>false,'msg'=>$error_cod));
}
$photo_tmp_file_name=//這里設置存放路徑
move_uploaded_file($tmp_name,$photo_tmp_file_name);//存儲文件
?>

⑵ 怎麼在extjs的toolbar中加入上傳功能，或者在toolbar中增加選擇本地文件的對話框

首先在頁面中引用這個js
<script type="text/javascript" src="../ext/UploadDialog/Ext.ux.UploadDialog3.0.js"></script>
然後在再你自己的js里的工具條按鈕點擊事件里加上如下代碼，就可回以彈出那個對話答框了，上傳功能有些復雜……
var dialog = new Ext.ux.UploadDialog.Dialog({
url: '',
reset_on_hide: false,
allow_close_on_upload: true,
upload_autostart: false
});

dialog.show();

⑶ extjs 要在選擇按鈕後增加一個上傳按鈕，

單個按鈕的話，參考如下，如果你是想通過兩個按鈕來表達開關稍作擴展即可：回

new Ext.Button ({
scale:'Large',
fieldLabel :'是否',
iconAlign : 'left',
id : 'ynButton',
tag : 'Y',
handler :function(button){
if(button.tag == 'N'){
button.tag = 'Y';
Ext.getDom(button.getId()).innerHTML ='Y圖片答';
}else if(button.tag=='Y'){
button.tag= 'N';
Ext.getDom(button.getId()).innerHTML ='N圖片';
}
}
})

⑷ 誰做過ExtJS上傳下載文件的功能，求教

//附件上傳表單
varwareFrom=Ext.create('Ext.form.Panel',{
		items:[{
			xtype:'filefield',
			name:'upfile',
			fieldLabel:'文件上傳',
			blankText:'請選擇文件',
			allowBlank:false
		}]
	});
//創建一個窗體
varwin=Ext.create('Ext.window.Window',{
		title:'上傳課件',
		width:'auto',
		height:'auto',
		layout:'fit',
		items:wareFrom,
		buttonAlign:'center',
		buttons:[{
			minWidth:80,
			text:'取消',
			handler:function(){	win.hide();	}
		},{
			minWidth:80,
			text:'上傳',
			handler:upLoad
		}]
	});
//顯示窗體	
win.show();
//點擊上傳按鈕處理事件
functionupLoad(){
	if(wareFrom.getForm().isValid()){
		wareFrom.getForm().submit({
			waitTitle:'請稍候',
			waitMsg:'正在執行操作...',
			url:'upload.php?upload=ok',
			method:'POST',
			success:function(form,action){
				Ext.Msg.alert('提示',action.result.msg);
				wareFrom.getForm().reset();
			},
			failure:function(form,action){	
			Ext.Msg.alert('提示',action.result.msg);
		}
		});
	}	
}

//後台不管你用的什麼，流程一致，此以php為例，因為比較好寫
<?php
if($_GET['upload']=='ok'){
//上傳路徑
$location='upload_file/';

//此處的name是上傳窗體，upload控制項的name
if(move_uploaded_file($_FILES['upfile']['tmp_name'],$location)){
echojson_encode(array('success'=>true,'msg'=>'上傳成功'));	
}else{
echojson_encode(array('success'=>false,'msg'=>'上傳發生了錯誤'));
}
}
?>

//下載
<?php
//此處需前台傳一個id過來
$id=$_GET['id'];
$sql="SELECT*FROM`ware`WHERE`id`='$id'";
$result=mysql_query($sql);
$row=mysql_fetch_row($result);

//此處的row是文件保存在資料庫的路徑
if(file_exists($row[0])){

//用stream讀取該文件
$file=fopen($row[0],'r');
header('Content-Type:application/octet-stream');
header('Accept-Ranges:bytes');
header('Accept-Length:'.filesize($row[0]));

//此處的row1是文件名稱
header('Content-Disposition:attachment;filename='.$row[1]);
echofread($file,filesize($row[0]));
fclose($file);
}
?>

//有什麼地方不明白的話，歡迎繼續追問

⑸ extjs5.0加springMVC如何實現將文件上傳到本地tomcat上

用 springMVC 來做項目，如果遇到文件上傳，那麼一定要用 spring 自帶的文件處理類來處理上傳的文件，因為效率實在高過其他的。
從界面傳過來的參數，如果設置了值對象，那麼可以從值對象裡面取出字元串類型的普通參數，如果不這樣做，也可以直接從 request 裡面獲得，兩種方法都可以。
問題是如果值對象裡面寫了其他類型的變數，妄想像 Struts2 那樣處理，springMVC 就會報出 400 Bad Request 的錯誤。
在 Struts2 裡面，我們可以定義一個值對象為
public class ImageVo {
private String roomnumber;

private File image1 ;
private File image2 ;
private File image3 ;
}

然後在後台從前台傳過來的值對象裡面取出image1……，那就是一個文件流了，非常好處理上傳文件。但 springMVC 只能接受全部為 string 類型的字元串值，那麼該怎麼做呢？
前台Extjs4代碼：
/**
* 圖片添加
* @type {Ext.form.Panel}
*/
var addImageForm = new Ext.form.Panel({
border: false, bodyPadding: 5, id: 'addImageForm',height:350,
fieldDefaults: {labelWidth: 80, labelSeparator: ": ", anchor: '95%'},

items: [
{xtype:'fieldset',title:'圖片上傳', collapsible:true,
items:[
{
xtype:'textfield',
fieldLabel: '房間號碼',
name: 'roomnumber',
id: 'roomnumber1',
allowBlank: false,
maskRe: /[\d]/,
reegx: /[\d{4}]/,
minLength: 4,
maxLength: 4,
emptyText: '請輸入四位的房間號碼（前兩位代表樓層，後兩位代表房間號）',
regexText: '請輸入正確的房間號碼',
//驗證該房間號碼是否存在 !
listeners: {
blur: function (e, t, eOpts) {
var roomnumber = e.rawValue;
if(roomnumber.length == 4){
Ext.Ajax.request({
method: 'post',
params: {roomnumber: roomnumber},
url: '/room/findroomhold',
callback: function (options, success, response) {
var jsonString = Ext.JSON.decode(response.responseText);
if (jsonString.success) {

} else {
Ext.Msg.alert('警告', jsonString.msg);
}
}
});
}
}
}
},{
xtype:'filefield',
fieldLabel:'上傳圖片1',
name:'image1',
id:'image1',
buttonText:'',
buttonConfig:{iconCls:'upload'},
listeners:{
change:function(btn, value, eOpts){
var img_reg = /\.([jJ][pP][gG]){1}$|\.([jJ][pP][eE][gG]){1}$|\.([gG][iI][fF]){1}$|\.([pP][nN][gG]){1}$|\.([bB][mM][pP]){1}$/;
if ( img_reg.test(value) ) {
var img = Ext.getCmp('img1');
var file = btn.fileInputEl.dom.files[0];
var url = URL.createObjectURL(file);
img.setSrc(url);
} else {
Ext.Msg.alert('提示', '請選擇圖片類型的文件！');
return ;
}
}
}
},{
xtype:'filefield',
fieldLabel:'上傳圖片2',
name:'image2',
id:'image2',
buttonText:'',
buttonConfig:{iconCls:'upload'},
listeners:{
change:function(btn, value){
var img_reg = /\.([jJ][pP][gG]){1}$|\.([jJ][pP][eE][gG]){1}$|\.([gG][iI][fF]){1}$|\.([pP][nN][gG]){1}$|\.([bB][mM][pP]){1}$/;
if ( img_reg.test(value) ) {
var img = Ext.getCmp('img2');
var file = btn.fileInputEl.dom.files[0];
var url = URL.createObjectURL(file);
img.setSrc(url);
} else {
Ext.Msg.alert('提示', '請選擇圖片類型的文件！');
return ;
}
}
}
},{
xtype:'filefield',
fieldLabel:'上傳圖片3',
name:'image3',
id:'image3',
buttonText:'',
buttonConfig:{iconCls:'upload'},
listeners:{
change:function(btn, value){
var img_reg = /\.([jJ][pP][gG]){1}$|\.([jJ][pP][eE][gG]){1}$|\.([gG][iI][fF]){1}$|\.([pP][nN][gG]){1}$|\.([bB][mM][pP]){1}$/;
if ( img_reg.test(value) ) {
var img = Ext.getCmp('img3');
var file = btn.fileInputEl.dom.files[0];
var url = URL.createObjectURL(file);
img.setSrc(url);
} else {
Ext.Msg.alert('提示', '請選擇圖片類型的文件！');
return ;
}

}
}
}
]
},{xtype:'fieldset',title:'圖片預覽',layout:'column',defaults:{width:130},
items:[
{xtype:'image',id:'img1'},
{xtype:'image',id:'img2'},
{xtype:'image',id:'img3'}
]
}
],
dockedItems: [
{
xtype: 'toolbar', dock: 'bottom', ui: 'footer', layout: {pack: 'center'},
items: [
{text: '確認上傳', disabled: true, formBind: true, handler: function () {
var form = this.up('form').getForm();
if (form.isValid()) {
form.submit({
url: '/image/add',
method: 'post',
submitEmptyText: false,
waitMsg: '請稍等，系統正在幫您添加',
success: function (form, action) {
//Ext.Msg.alert('成功', "上傳成功！");
Ext.Msg.alert('成功', action.result.msg);
},
failure: function (form, action) {
Ext.Msg.alert('失敗', action.result.msg);
//Ext.Msg.alert('失敗', "上傳失敗");
}
})
}
}},
{text: '重置', handler: function () {
this.up('form').getForm().reset();
}}

]
}
]
});

⑹ extjs 3.4中 怎麼給htmlEdit添加圖片插件 實現圖片上傳功能

首先要使用extjs自帶的HTMLEditor，然後在原有的工具條上添加一個圖片按鈕，點擊這個圖片按鈕要彈出窗口，這個窗口負責實現上傳功能，實現上傳後，要將上傳的圖片路徑添加到HTMLEditor的游標處，並且要以<IMG></IMG>的方式，這樣HTMLEditor才能解析出來。實現代碼如下：

前台JSP頁面

fieldLabel : '商品特性',
id : 'shopSp.spTxms',

name : 'shopSp.spTxms',
xtype : 'StarHtmleditor',
anchor : '93%'

這其中引用了StarHtmleditor，StarHtmleditor.js的代碼如下，直接將代碼復制下來，然後新建個JS，全復制進去就行了。

var HTMLEditor = Ext.extend(Ext.form.HtmlEditor, {
addImage : function() {
var editor = this;
var imgform = new Ext.FormPanel({
region : 'center',
labelWidth : 55,
frame : true,
bodyStyle : 'padding:5px 5px 0',
autoScroll : true,
border : false,
fileUpload : true,
items : [{
xtype : 'textfield',
fieldLabel : '選擇文件',
id : 'UserFile',
name : 'UserFile',
inputType : 'file',
allowBlank : false,
blankText : '文件不能為空',
anchor : '90%'
}],
buttons : [{
text : '上傳',
handler : function() {
if (!imgform.form.isValid()) {return;}
imgform.form.submit({
waitMsg : '正在上傳......',
url : 'HTMLEditorAddImgCommonAction.action',
success : function(form, action) {
var element = document.createElement("img");
element.src = action.result.fileURL;
if (Ext.isIE) {
editor.insertAtCursor(element.outerHTML);
} else {
var selection = editor.win.getSelection();
if (!selection.isCollapsed) {
selection.deleteFromDocument();
}
selection.getRangeAt(0).insertNode(element);
}
//win.hide();//原始方法，但只能傳一個圖片
//更新後的方法
form.reset();
win.close();
},
failure : function(form, action) {
form.reset();
if (action.failureType == Ext.form.Action.SERVER_INVALID)
Ext.MessageBox.alert('警告','上傳失敗',action.result.errors.msg);
}
});
}
}, {
text : '關閉',
handler : function() {
win.close(this);
}
}]
})

var win = new Ext.Window({
title : "上傳圖片",
width : 300,
height : 200,
modal : true,
border : false,
iconCls : "picture.png",
layout : "fit",
items : imgform

});
win.show();
},
createToolbar : function(editor) {
HTMLEditor.superclass.createToolbar.call(this, editor);
this.tb.insertButton(16, {
cls : "x-btn-icon",
icon : "picture.png",
handler : this.addImage,
scope : this
});
}
});
Ext.reg('StarHtmleditor', HTMLEditor);

JS的第一句var HTMLEditor = Ext.extend(Ext.form.HtmlEditor, 網上是沒有var的，不用var不知道為什麼總是報錯，另外JS一定要與JSP的編碼方式一致，要不然報莫名其妙的錯誤，而且錯誤都沒有顯示。

後台java代碼

/****
* HTMLEditor增加上傳圖片功能：
* 1、上傳圖片後，需要將圖片的位置及圖片的名稱返回給前台HTMLEditor
* 2、前台HTMLEditor根據返回的值將圖片顯示出來
* 3、進行統一保存
* @param 上傳圖片功能
* @return JSON結果
* @throws IOException
*/
public void HTMLEditorAddImg() throws IOException {
if(!"".equals(UserFile) && UserFile != null && UserFile.length() > 0){
File path = ImportImg(UserFile, "jpg");
UserFilePath = "../" + path.toString().replaceAll("\\", "/").substring(path.toString().replaceAll("\\", "/").indexOf("FileImg"));
}
this.getResponse().setContentType("text/html");
this.getResponse().getWriter().write("{success:'true',fileURL:'" + UserFilePath + "'}");
}

特別要注意的是路徑問題，路徑問題主要有2點需要注意：

1、前台頁面引用StarHtmleditor.js的路徑一定要正確；

2、Htmleditor上傳的圖片路徑一定要改，因為上傳之後圖片路徑變為http://localhost:8080/，在正常使用中圖片不顯示，要將該地址替換為伺服器的IP地址；替換方法如下：

//獲取本地IP地址,因為extjs的htmleditor上傳的照片路徑有問題，需要將路徑替換為本機IP地址
InetAddress inet = InetAddress.getLocalHost();
shopSp.setSpTxms(shopSp.getSpTxms().replace("localhost", inet.getHostAddress().toString()));

這樣基本就完成了這個HTMLEditor上傳圖片功能。

如圖：