包含extjs3.2附件上傳的詞條

本文目錄一覽：

• 1、求救！Extjs fileuploadfield怎麼上傳到服務器 後台用.net寫
• 2、extjs 3.4中 怎麼給htmlEdit添加圖片插件 實現圖片上傳功能
• 3、extjs 如何在動態生成的EditorGridPanel的單元格裡面添加一個上傳文件的功能？
• 4、extjs ajax 可以上傳文件嗎
• 5、ExtJs中怎麼上傳文件

求救！Extjs fileuploadfield怎麼上傳到服務器 後台用.net寫

var formFilePath = new Ext.ux.form.FileUploadField({ id: ‘PrjFilePath’, emptyText: ‘請選擇要導入的文件！’, fieldLabel: ‘文件路徑’, name: ‘PrjFilePath’, buttonText: ”,

buttonCfg: { iconCls: ‘page_white_put’ }

});

HttpPostedFile postedFile = Request.Files[“PrjFilePath”];

string ImportFile = postedFile.FileName;

string fileName = SaveFile(postedFile, Server, Request); //文件保存至服務器

System.IO.FileStream stream = System.IO.File.OpenRead(fileName);

//文件流操作你就根據你的業務來 自行搞定

//保存方法

String SaveFile(HttpPostedFile postedFile, HttpServerUtility server, HttpRequest request)

{

String fullName = “”;

try

{

String fileName = Path.GetFileName(postedFile.FileName);

String fileExtension = Path.GetExtension(fileName);

String year = DateTime.Now.Year.ToString();

DateTime date = DateTime.Now;

//生成文件名

String saveName = date.ToString(“yyyyMMddHHmmssfffffff”);

String tmpName = saveName + fileExtension;

String path = server.MapPath(@”~/” + ExcelHelper.PATH_NAME);

fullName = path + @”\” + tmpName;

postedFile.SaveAs(fullName);

}

catch (Exception)

{

throw new Exception(“保存上傳文件出錯！”);

}

return fullName;

}

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上傳的圖片路徑一定要改，因為上傳之後圖片路徑變為，在正常使用中圖片不顯示，要將該地址替換為服務器的IP地址；替換方法如下：

//獲取本地IP地址,因為extjs的htmleditor上傳的照片路徑有問題，需要將路徑替換為本機IP地址

InetAddress inet = InetAddress.getLocalHost();

shopSp.setSpTxms(shopSp.getSpTxms().replace(“localhost”, inet.getHostAddress().toString()));

這樣基本就完成了這個HTMLEditor上傳圖片功能。

如圖：

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

容器（可以是form等等）.GetItemText(“列名”)

獲取到你附件列

然後SetItemText(“列名”,設置的值)

也可以用

控件類.SetItemValue(設置的值)

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’,’文件上傳成功！’);  

        }  

    });  

});

form id=”upform”  

    請選擇文件：input type=”file” name=”imgFile”/  

    input type=”button” id=”btn” value=”上傳”/  

/form

?php

if(!isset($_FILES[‘imgFile’])){

echo json_encode(array(“success”=false, ‘msg’=”Not get Imgfile”));

return;

}

$upfile=$_FILES[‘imgFile’];

$name=$upfile[“name”];//上傳文件的文件名 

$type=$upfile[“type”];//上傳文件的類型 

$size=$upfile[“size”];//上傳文件的大小 

$tmp_name=$upfile[“tmp_name”];//上傳文件的臨時存放路徑 

$error_cod=$upfile[“error”];

 if ($error_cod0){

echo json_encode(array(“success”=false, ‘msg’=$error_cod));

} 

$photo_tmp_file_name=  //這裡設置存放路徑

move_uploaded_file($tmp_name,$photo_tmp_file_name); //存儲文件

?

ExtJs中怎麼上傳文件

在formpanal中增加一個fileUpload的屬性就可以直接上傳了：

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(‘錯誤’, ‘文件上傳失敗’); 

        } 

      }); 

     } 

   }] 

   }); 

   });