使用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脚本

 

转载于:https://www.cnblogs.com/cscode/p/5317515.html