使用extjs4.2 實現圖片的上傳並預覽

【注意：測試發現在ie上不能顯示頁面，效果是在谷歌瀏覽器測試】

【上傳博客之后我發現上傳功能無效了，sorry】

參考博客：http://blog.csdn.net/zljjava/article/details/25419631

使用extjs4.2 進行圖片上傳操作，在選擇圖片的同時我們需要加載預覽圖片，晚上這方面的資料不少，但是這些代碼真正使用的時候發現不適合extjs4.2

網上基本上是通過獲取到上傳文件的控件 使用其dom屬性但是在extjs4.2中不能直接調用控件的該屬性。

在獲取我們選擇上傳的文件時我們使用上傳控件的inputEl屬性在調用dom

而我們需要顯示圖片的控件我們使用其src來進行加載。

效果圖：

上傳文件和顯示圖片的js代碼：

var formpanel= Ext.create("Ext.form.FormPanel", {
    title: 'ExtJS 無刷新文件上傳（<font color="red">文件最大</font>)',
    width: '95%',
    height: '95%',
    x:5,
    y: 5,
    layout: "form",
    bodyPadding: "5",
    defaultType: "textfield",
    fieldDefaults: { labelAlign: "left", labelWidth: 55 },
    items: [
        {
            id: 'File',
            name: 'File',
            inputType: "file",
            fieldLabel: '上傳圖片',
            xtype: 'textfield',
            anchor: '40%',
            allowBlank: false,
            listeners: {//監聽事件
                'render': function () {//讀取
                    console.log('讀取照片');
                    var path = Ext.getCmp('File').getValue()
                    var url = 'file:///' + path;
                    console.log(url);//瀏覽器安全保護下的虛擬路徑
                    Ext.getCmp('File').on('change', function (field, newValue, oldValue) {//上傳圖片的控件對象,剛剛選擇的圖片仿真路徑，上次選擇的圖片仿真路徑
                        console.log(newValue);
                        console.log('瀏覽器類型：是ie？' + Ext.isIE);
                        var show = Ext.getCmp('browseImage');
                        console.log(show);
                        if (Ext.isIE) {
                            
                        } else {//獲取選擇文件的路徑信息？ 將路徑綁定到顯示圖片的box內加載
                            var obj = Ext.getCmp('File').inputEl.dom.files;
                            console.log(len);
                            var len = obj.length;//選文件的數量
                            if (len < 1) {
                                console.log('沒有選擇圖片');
                                return;
                            }

                            var imgurl = window.URL.createObjectURL(obj[0]);
                            console.log(imgurl)
                            Ext.getCmp('browseImage').getEl().dom.src = imgurl;

                        }
                    }, this);//這是選擇文件 
                }
            }
        },
        {
            xtype: 'box', //或者xtype: 'component',
            width: '100%', //圖片寬度
            height: 200, //圖片高度
            fieldLabel: "預覽圖片",
            id: 'browseImage',
            autoEl: {
                tag: 'img',    //指定為img標簽
                //src: 'ftp://127.0.0.1/UserFile/UserData/20160320/hotel_hotel_20160820220330.jpg',  //Ext.BLANK_IMAGE_URL,//指定url路徑
                src: Ext.BLANK_IMAGE_URL,
                id: 'imageBrowse'
            }
        }
    ],
    buttons: [
        {
            text: "上傳",
            handler: function () {
                var formCmp = this.up("form");
                if (!formCmp.isValid()) return;    //驗證未通過，返回
                var photoName = Ext.getCmp('File').getValue();
                console.log(photoName);
                formCmp.submit({
                    url: "../User/Upload",
                    method: "POST",
                    waitMsg: '正在上傳...',
                    params: {
                        photoName: photoName
                    },
                    success: function (form, action,ret) {
                        console.log(form);
                        console.log(action);
                        console.log(ret);
                        Ext.MessageBox.alert("提示", action.result.message);
                    },
                    failure: function (form, action, ret) {
                        console.log('submit認為請求失敗，可是操作成功了');
                        console.log(form);
                        console.log(action);
                        console.log(ret);
                        switch (action.failureType) {
                            case Ext.form.action.Action.CLIENT_INVALID:
                                Ext.Msg.alert('失敗1', 'Form fields may not be submitted with invalid values');
                                break;
                            case Ext.form.action.Action.CONNECT_FAILURE:
                                Ext.Msg.alert('失敗2', 'Ajax communication failed');
                                break;
                            case Ext.form.action.Action.SERVER_INVALID:
                                Ext.Msg.alert('失敗3', action.result.message);
                        }
                    }
                });
            }
        }, {
            text: '關閉',
            handler: function () {
                //win.hide();
            }
        }
    ]
});
//窗體
var win = new Ext.Window({
    title: '上傳文件窗口',
    width: 476,
    height: 374,
    resizable: false,
    modal: false,
    closable: false,
    closeAction: 'hide',
    custormServiceAimObjectId: '',//這是給哪個對象進行文件上傳操作（如哪家酒店ID）
    custormFileType: ''//自定義屬性，指向文件的類型
});
//html頁面種通過調用這個函數顯示上傳窗體
function btnUpload_click(maxFileSize, winTitle, fileCategory, custormServiceAimObjectId) {//其他窗體需要進行上傳文件只需要調用這個函數就可以
    console.log('調用js腳本的函數進行窗體');
    win.setTitle(winTitle);
    win.custormFileType = fileCategory;
    console.log(custormServiceAimObjectId);
    win.custormServiceAimObjectId = custormServiceAimObjectId;
    win.items.removeAll();//移除之前全部的items
    var limitFileMB = maxFileSize == null ? '10MB' : maxFileSize;
    formpanel.setTitle('ExtJS 無刷新文件上傳（<font color="red">文件最大' + limitFileMB + '</font>)');
    win.items.add(formpanel);
    win.doLayout();
    win.show();
}

 

 

　//這里面的語句就是我們上傳和顯示使用的js腳本