⑴ 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><?phpif(!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为例，因为比较好写<?phpif($_GET['upload']=='ok'){//上传路径$location='upload_file/';//此处的name是上传窗体，upload控件的nameif(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上传图片功能。
如图：
