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','文件上传成功！')  

  燃宏      }  

    })  

}) <form id="upform">  

    请选择文件：<input type="file" name="imgFile"/>  

    <input type="button" id="btn" value="上传"/>  

</form> <?php

if(!isset($_FILES['imgFile'])){

echo json_encode(array("success"=>false, 'msg'=>"Not get Imgfile"))

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){

echo json_encode(array("success"=>false, 'msg'=>$error_cod))

} 

$photo_tmp_file_name=  //这里设置存放路径

move_uploaded_file($tmp_name,$photo_tmp_file_name) //存储文件

?>

用 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()

}}

]

}

]

})

---