extjs42上傳文件
❶ 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 關於上傳文件如何獲取文件的全路徑問題
我也遇到同樣問題，同野姿是天核槐涯淪落人
看看這篇文章也頌氏絕許能解決http://blog.csdn.net/lzy_1515/article/details/5734500
❸ 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上傳圖片功能。
如圖：
❹ 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();
}
}
});
❺ Extjs4.2上傳文本框只讀和賦值
使用setReadOnly(true)方法改為只讀
❻ ExtJs可以限制上傳文件的格式嗎
ExtJs能不能不知道（貌似不可以），但是可以用別的方式達到。給你提供個思路：比如你限制僅能上傳txt，pdf，xml，doc格式的文件，上傳時，先獲取上傳的文件名，截取文件的後綴名（這個很簡單，用split功能就可以了，以 .（點）作為分隔符），然後跟允許的上傳格式字元對比，如果不同，則不允許上傳，相同則允許（其實用正則表達式也是可以的）。比如：
var a="filename.pdf"（文件名自己去獲取）
var b=a.split(".")（截取之後是個數組["filename","pdf"]）
b[1]就是後綴名pdf
這樣再對比：if(
b[1]
.toLowerCase()==『pdf』)
alert("ok");
❼ 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);//存儲文件
?>
❽ 我用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這兩個就可以了
❾ 使用ExtJs的FileUploadField.js上傳文件時遭遇文件路徑始終包含C:\fakepath字眼 如何獲取真實文件路徑
這是瀏覽器的安全策略,無法使用js修改的,ExtJs的大神們都沒解決這個飢卜穗
只能判斷是否支持顯示完整路徑,然後進弊胡行顯示
或使用flash的上傳文件方式,瀏覽器可管不了flash的事爛卜