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("提示",'返回失敗');
}
});
}
}
}