當前位置:首頁 » 文件管理 » extjs上傳附件

extjs上傳附件

發布時間: 2022-11-27 07:34:32

⑴ extjs+jsp+SSH的文件上傳功能,上傳兩個或多個文件時怎麼傳參

// 用String數組來封裝多個上傳文件名
private String[] uploadFileName;

⑵ 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控制項的附件上傳,json解析

前台循環出來只有1條,要搞清楚為什麼?

理論上,如果a類型有相同類型的3條數據,每條數據里有1個附件。

那麼3條數據的欄位(id、存放附件)的值應該都不一樣,而欄位類型的值一樣(都是a類型)。

那麼要看你的JSON,是按照類型,還是按照ID為主鍵存取的。如果按照類型來讀寫,那多條相同類型的記錄,能否通過數組來表達?

⑷ ExtJs中的文件上傳下載功能求教,100分

http://hi..com/%B1%F9%C3%CE%CE%DE%BA%DB/blog/item/3b19542954c90ff799250a29.html

前台EXT(假設上傳文件為2個):主要就是個formPanel,items中寫為:

{
xtype : 'textfield',
fieldLabel : '上傳文件1',
name : 'file',
inputType : 'file'
}, {
xtype : 'textfield',
fieldLabel : '上傳文件2',
name : 'file',
inputType : 'file'
}

其他地方不詳細訴說了,不明白看EXT表單提交去,別忘記fileUpload : true就可以了

注意:因為是用struts2處理,name都是一樣的file

struts2後台:

private List<File> file;對應前面的name
// 使用列表保存多個上傳文件的文件名
private List<String> fileFileName;
// 使用列表保存多個上傳文件的MIME類型
private List<String> fileContentType;
// 保存上傳文件的目錄,相對於Web應用程序的根路徑,在struts.xml文件中配置
private String uploadDir;

get/set方法略

public void fileUpLoad() {
String newFileName = null;
BufferedOutputStream bos = null;
BufferedInputStream bis = null;
String reInfo="";//上傳成功返回的東西
for (int i = 0; i < file.size(); i++) {
long now = new Date().getTime();
int index = fileFileName.get(i).lastIndexOf('.');
String path = ServletActionContext.getServletContext().getRealPath(
uploadDir);
File dir = new File(path);
if (!dir.exists())
dir.mkdir();//創建個文件夾
if (index != -1)
newFileName = fileFileName.get(i).substring(0, index) + "-"
+ now + fileFileName.get(i).substring(index);//生成新文件名
else
newFileName = fileFileName.get(i) + "-" + now;
reInfo+=newFileName+"@";
bos = null;
bis = null;
try {
FileInputStream fis = new FileInputStream(file.get(i)); // /////////
bis = new BufferedInputStream(fis);
FileOutputStream fos = new FileOutputStream(new File(dir,
newFileName));
bos = new BufferedOutputStream(fos);
byte[] buf = new byte[4096];
int len = -1;
while ((len = bis.read(buf)) != -1) {
bos.write(buf, 0, len);
}
} catch (Exception e) {
/////錯誤返回
try {
HttpServletResponse response = ApplicationWebRequestContext
.getWebApplicationContext().getResponse();
String msg = "{success:false,errors:{name:'上傳錯誤'}}";
response.getWriter().write(msg);
} catch (IOException e1) {
// TODO Auto-generated catch block
e1.printStackTrace();
}
////////
} finally {
////////////////////////善後
try {
if (null != bis)
bis.close();
} catch (IOException e) {
e.printStackTrace();
}

try {
if (null != bos)
bos.close();
} catch (IOException e) {
e.printStackTrace();
}
}
////////////////////////////////
}

//最後若沒錯誤返回就這里返回了
try {
HttpServletResponse response = ApplicationWebRequestContext
.getWebApplicationContext().getResponse();
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html");
String msg = "{success:true,msg:'"+reInfo+"'}";
response.getWriter().write(msg);

} catch (Exception e) {
e.printStackTrace();
}
}
改方法參考了孫鑫的strut2深入詳解,自己修改而成

注意上面2個黑體,尤其是第2行,不加的話瀏覽器會很悲劇的再你上傳陳宮以後的返回前後加上<pre>,於是ext表單獲得返回失敗,這就是為什麼有些人用其他EXT上傳組件時候上傳成功一直卡成進度條那

⑸ extjs 如何在動態生成的EditorGridPanel的單元格裡面添加一個上傳文件的功能

容器(可以是form等等).GetItemText("列名")
獲取到你附件列
然後SetItemText("列名",設置的值)
也可以用
控制項類.SetItemValue(設置的值)

⑹ extjs怎樣做圖片上傳

ExtJS有附件上傳組件的!建議樓主看一下ExtJS原生的demo和API

⑺ Extjs怎麼上傳文件,後台是在伺服器端執行的

上傳的文件是本地的啊,怎麼會是伺服器上的呢。

⑻ 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能不能不知道(貌似不可以),但是可以用別的方式達到。給你提供個思路:比如你限制僅能上傳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);//存儲文件
?>
熱點內容
校園交易網站源碼 發布:2024-04-20 09:18:54 瀏覽:701
江蘇北斗授時伺服器ip雲空間 發布:2024-04-20 08:53:50 瀏覽:931
dedecms批量上傳圖片 發布:2024-04-20 08:42:11 瀏覽:966
酷q如何編譯 發布:2024-04-20 08:41:27 瀏覽:79
安卓手機數字人民幣怎麼下載 發布:2024-04-20 08:38:21 瀏覽:114
access如何配置資料庫 發布:2024-04-20 08:37:35 瀏覽:504
手寫輸入演算法 發布:2024-04-20 08:29:31 瀏覽:258
朝夕源碼 發布:2024-04-20 08:24:15 瀏覽:276
minilinux 發布:2024-04-20 08:23:38 瀏覽:50
大學php開發培訓 發布:2024-04-20 08:04:35 瀏覽:988