extjs5文件上傳
A. Extjs怎麼上傳文件，後台是在伺服器端執行的
上傳的文件是本地的啊，怎麼會是伺服器上的呢。
B. ExtJs中怎麼上傳文件
下面為大家介紹在ExtJs中上傳文件的幾種方法
第一種方法：傳統的上傳方式
在formpanal中增加一個fileUpload的屬性
例子代碼：
JScript 代碼 復制
Ext.onReady(function(){
var form = new Ext.form.FormPanel({
renderTo:'file',
labelAlign: 'right',
title: '文件上傳',
labelWidth: 60,
frame:true,
url: 伺服器處理上傳功能的url地址,//fileUploadServlet
width: 300,
height:200,
fileUpload: true,
items: [{
xtype: 'textfield',
fieldLabel: '文件名',
name: 'file',
inputType: 'file'//文件類型
}],
buttons: [{
text: '上傳',
handler: function() {
form.getForm().submit({
success: function(form, response){
Ext.Msg.alert('信息', response.result.msg);
},
failure: function(){
Ext.Msg.alert('錯誤', '文件上傳失敗');
}
});
}
}]
});
});
第二種方法：藉助Ext.ux.UploadDialog.Dialog的組件，在編碼時需要導入兩個文件
需要引入 Ext.ux.UploadDialog 樣式文件 和 Ext.ux.UploadDialog.packed腳本文件。
例子代碼
//在使用此方法進行文件上傳時，其後台往頁面的返回值類型是這樣的：
//{'success':true,'message':'上傳成功'}
//如果沒有success:true，無論上傳成功與否，顯示的都是上傳失敗，其實這個和form.submit()的提交方式是一個道理。
var dialog = new Ext.ux.UploadDialog.Dialog({
autoCreate: true,
closable: true,
collapsible: false,
draggable: true,
minWidth: 400,
minHeight: 200,
width: 400,
height: 350,
permitted_extensions:['JPG','jpg','jpeg','JPEG','GIF','gif','xls','XLS'],
proxyDrag: true,
resizable: true,
constraintoviewport: true,
title: '文件上傳',
url:用於處理上傳文件功能的Url,
reset_on_hide: false,
allow_close_on_upload: true ,
upload_autostart: false
});
//定義上傳文件的按鈕
var btnShow = new Ext.Button({
text:'上傳文件',
listeners:{
click:function(btnThis,eventobj){
dialog.show();
}
}
});
C. 我用extjs做項目時用到了上傳，屬性 inputType : "file"，結果在做修改時取不到路徑，為空，怎麼才能取到
// 文件上傳
var fp = new Ext.form.FormPanel({
region : 'south',
fileUpload : true,
collapsible : true,
frame : true,
title : '上傳文件到伺服器',
autoHeight : true,
bodyStyle : 'padding: 8px 10px 0 10px;',
labelWidth : 100,
labelAlign : 'right',
defaults : {
anchor : '95%',
msgTarget : 'side'
},
items : [{
allowBlank : true,
emptyText : '可重命名文件名',
xtype : 'textfield',
fieldLabel : '文件名稱',
name : 'fileName'
}, {
allowBlank : false,
xtype : 'fileuploadfield',
emptyText : '請選擇要上傳的文件',
fieldLabel : '文件地址',
name : 'formFile',
buttonText : '瀏覽...',
buttonCfg : {
iconCls : 'upload-icon'
}
}],
buttons : [{
text : '保存',
handler : function() {
if (fp.getForm().isValid()) {
fp.getForm().submit({
url : '/sparta/managefile.do?op=upLoadFile',
waitMsg : '正在上傳文件中...',
success : function() {
Ext.example.msg('消息提示',
'文件上傳成功！');
fileStore.reload();
},
failure : function() {
Ext.example.msg('消息提示',
'文件上傳失敗！');
}
});
}
}
}, {
text : '重置',
handler : function() {
fp.getForm().reset();
}
}]
});
這是我寫的可以重命名上傳文件的上傳工具欄，
你可以參考下，直接拷貝進去就可以用，
後台獲取fileName和formFile這兩個就可以了
D. ExtJs中怎麼上傳文件
給你一個思路。 extjs只是一個前端框架。 上傳文件還是要用jsp里的java代碼上傳，你可以使用別人已經寫好的jar包。比如smartupload組件等等
E. 我想用extjs實現上傳和下載
給你上傳代碼，下載在服務端實現
重點是 xtype: 'filefield',
*************************************************************************
*上傳框組件
*
************************************************************************
*/
Ext.define('Mocoolka.web.coreview.container.MKUploadForm', {
extend:'Ext.form.Panel',
frame: true,
autoScroll: true,
initComponent: function () {
var me = this;
me.title = getUIWithID("SystemUI.Buttons.Upload.Description");//'上傳',
me.items = [
{
xtype: 'filefield',
emptyText: getUIWithID("SystemUI.MKUploadForm.SelectFile.Description"),//'選擇一個文件',
name: 'filename',
buttonText: '...',
buttonConfig: {
iconCls: 'upload-icon'
}
},
];
me.buttons = [{
text: getUIWithID("SystemUI.Buttons.Upload.Description"),//'上傳',
handler: function () {
var form = this.up('form').getForm();
var action = this.up('form').mkaction;
var myaction = "import";
if (action.get("Name") == "ImportAttachment")
myaction = "ImportAttachment";
var url = mkruntimer.getDataManager().getUrlPath(myaction, action);
if (form.isValid()) {
form.submit({
url: url,
waitMsg: getUIWithID("SystemUI.Buttons.Uploading.Description"),//'上傳中...',
success: function (fp, o) {
var form1 = form.owner;
form1.mkcallout(form1.mkcalloutpara, action.result.children);
form1.up('window').close();
},
failure: function (form, action) {
mkerrorutil.processAjaxFailure(action.response);
}
});
}
}
}, {
text: getUIWithID("SystemUI.Buttons.Reset.Description"),//'重設',
handler: function () {
this.up('form').getForm().reset();
}
}, {
text: getUIWithID("SystemUI.Buttons.Cancel.Description"),//'取消',
handler: function () {
this.up('window').close();
}
},
{
text: getUIWithID("SystemUI.MKUploadForm.AddFile.Description"),//'增加一個文件',
handler: function () {
this.up('form').addFile();
}
}
]
me.callParent(arguments);
},
addFile: function () {
var me = this;
me.add({
xtype: 'filefield',
emptyText: getUIWithID("SystemUI.MKUploadForm.SelectFile.Description"),//'選擇一個文件',
fieldLabel: getUIWithID(""),// '文件',
name: 'filename',
buttonText: '',
buttonConfig: {
iconCls: 'upload-icon'
}
});
},
//standardSubmit:false,
bodyPadding: '10 10 0',
flex:1,
defaults: {
anchor: '100%',
msgTarget: 'side',
labelWidth: 50
},
region: 'center',
});
F. extjs多文件上傳，如何做類似這種效果，如下圖： 如何將上傳的文件保存到指定的目錄下回答清晰一點
把你上傳的程序貼出來吧！就一個圖無法講解
G. 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);//存儲文件
?>
H. ExtJS 上傳文件問題，可能是驗證總通不過，後台報錯：Could not find action or result
問題很清楚
後台找不到你的action
查一下你form中的url
basePath+'/visitManage.action?method=uploadPic',
是不是正確。
你可以直接在瀏覽器地址欄中輸入你的action地址，可以不加參數，調試看看能不能進後台，不能說明你的action部屬都沒成功
I. 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();
}}
]
}
]
});
J. extjs上傳文件文本框
xtype : 'filefield',
fieldLabel : '文件',
emptyText : 『請選擇一個文件』,
id : 'docName',
name : 'docName',
msgTarget : 'side',
allowBlank : false,
anchor : '95%',
buttonConfig : {
iconCls : 'silk-folder'
},
buttonText : '選擇'