ext上传图片
❶ extjs怎么使图片上传时显示预览
这个我做过，不难，思路给你
1.是当文本框内容发生改变的时候就将图片上传到服务器（如果图片小，用户是感觉不到你已经做了上传操作的。）
2.当服务器接受到这个图片的时候，将其放入到一个临时文件夹中并返回给前台一个图片路径（图片流也可以）。
3.Ajax请求会有一个相应，在服务器端成功接受到上传的图片后，返回给Ajax一个Reponse，这个Reponse里包含一个图片路径。
4.ExtJS在前台获取success里的responseText之后（也就是图片路径）将默认图片的src指向从后台反馈回来的图片路径。
现在图片就会现实出来
流程是：
用户选择图片-->
触发文本框改变事件--->
在事件中通过AJAX将图片上传给服务器--->
服务器将图片名称修改为UUID以免重复，并将此图片的路径返回给前台--->
前台AJAX请求的回调函数中获取responseText，也就是图片路径--->
设置默认图片的src为responseText---->
用户重新选择的时候（例如用户不喜欢这张图）--->
在文本框改变事件中通过AJAX将图片上传（包括先前上传的图片名称）--->
后台根据参数先删除临时图片--->
重复以上的步骤直到用户确定
需要注意的问题：
1.当用户改变了图片之后，需要把上一次的临时图片文件删除掉，以免出现垃圾图片过多。
2.每次上传图片的时候要在后面跟上一个随机参数（因为如果请求路径和参数相同，浏览器不会再继续发送请求）。通常情况下使用new Date()就可以了例如
"uploadImag.do?method=uploadImage&randomParam="+new Date()
3.图片太大的话，效果不是很好。
4.当用户点击确定后，将临时文件里的图片放置到你的正式图片存放目录下即可。
5.图片上传到后台使用UUID改名字，否则可能有重复
❷ ext js 浏览控件（上传图片功能）,上传上的图片怎么能显示在panel控件上，求解释
更改了panel的背景图片
❸ Ext上传即时预览图片在IE8下不支持，什么问题
IE6的图像预览代码在IE8下已失效，网上也有解决方案。不过还是建议用Flash比较好，各平台通过，很多网站已用这种方式了。
❹ ext js 上传图片控件
在服务端判断了，假设你的客户端控件 name = ”photo-path“
服务端可以写成以下：
HttpPostedFile postedFile = Request.Files["photo-path"];//获取上传信息对象
string filename = postedFile.FileName;//获取上传的文件路径
string sExtension = filename.Substring(filename.LastIndexOf('.'));//获取拓展名
然后就可以判断是否正确了，但是通过扩展名判断文件类型比较不靠谱了，因为扩展名是可以变更的。
❺ 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();
}
}
});
❻ ext的form中上传图片时正则验证没用，大家看看
增加全局变量。
var img_reg = /\.([jJ][pP][gG]){1}$|\.([jJ][pP][eE][gG]){1}$|\.([gG][iI][fF]){1}$|\.([pP][nN][gG]){1}$|\.([bB][mM][pP]){1}$/g;
❼ 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上传图片功能。
如图：
❽ ext上传问题，实现效果不了
xtype : 'fileuploadfield',
buttonOnly : true,
name : 'fileInput',
style : 'text-align:left;',
buttonText : '上传Excel文件',
iconCls : 'icon_common_add',
hidden : true,
listeners: {
'fileselected' : function(fb, filename){
if(!filename.endWith('xlsx') && !filename.endWith('xls')){
Ext.Msg.alert("提示","请选择xlsx或者xls类型的文件！");
return;
}
var cpfolder = Ext.getCmp(cpFordId).getValue();
var tempType = 8;
var regionType = Ext.getCmp(qId).getValue().inputValue;
var contentPic = Ext.getCmp(contentPicId).getValue();
if(cpfolder ==''){
Ext.Msg.alert("提示","请填写CP目录");
return ;
}
if(_this.spId == '' || _this.spId == null){
Ext.Msg.alert("提示","请选择SP信息");
return ;
}
var sWhere = '?cpId='+_this.cpId+'&spId='+_this.spId+'&tempType='+tempType+'®ionType='+regionType
+'&cpfolder='+cpfolder+'&contentPic='+contentPic;
if(Ext.getCmp(searchFormId).getForm().isValid()){
Ext.getCmp(searchFormId).getForm().submit({
url : 'fileUploadAction!newExcelUpload.ds'+sWhere,
waitMsg : '正在上传中,请稍后...',
success : function(response, options){
store.removeAll();
var info = options.result.data;
var rec = new Array();
for(var a in info[0]){
var r = {name : a};
rec.push(r);
}
var RecordType = Ext.data.Record.create(rec);
var data = new Array();
for(var i=0;i<info.length;i++){
var record = {};
for(var a in info[i]){
record[a] = info[i][a];
}
var recordtype = new RecordType(record);
data.push(recordtype);
}
store.add(data);
Ext.Msg.alert("提示",'返回成功');
},
failure : function(response, options){
Ext.Msg.alert("提示",'返回失败');
}
});
}
}
}