extjs怎样做图片上传

[jnkaixin2009]

extjs怎样做图片上传，页面的那个点击浏览怎么做啊

[夜雨山庄]

不是有上传组件吗？

[spkl1]

点击浏览:
xtype: 'fileuploadfield'

下面是htmleditor的自定义扩展
里面的url改为自己处理上传的后台页面地址,返回json数据

保存为js文件,scritp加载就可以了

var HTMLEditor = Ext.extend(Ext.form.HtmlEditor, {
    codeStyle:'<pre style="border-right: #999999 1px dotted; padding-right: 5px; border-top: #999999 1px dotted; padding-left: 5px; font-size: 12px; padding-bottom: 5px; margin-left: 10px; border-left: #999999 1px dotted; margin-right: 10px; padding-top: 5px; border-bottom: #999999 1px dotted; background-color: #eeeeee">{0}</pre>',
    codeFF:'border-right: #999999 1px dotted; padding-right: 5px; border-top: #999999 1px dotted; padding-left: 5px; font-size: 12px; padding-bottom: 5px; margin-left: 10px; border-left: #999999 1px dotted; margin-right: 10px; padding-top: 5px; border-bottom: #999999 1px dotted; background-color: #eeeeee',
    addImage : function() {
        var editor = this;
        var imgform = new Ext.FormPanel({
            region : 'center',
            labelWidth : 40,
            frame : true,
            bodyStyle : 'padding:5px 5px 0',
            autoScroll : true,
            border : false,
            fileUpload : true,
            items : [{
                        xtype: 'fileuploadfield',
                        id: 'LoadImage',
                        name: 'LoadImage',
                        emptyText: '请选择图片',
                        fieldLabel: '图片',
                        buttonText: '',
                        allowBlank : false,
                        buttonCfg: 
                        {
                            iconCls: 'uploaddialog'
                        },
                        anchor : '98%'
                    }],
            buttons : [{
                    text : '上传',
                    type : 'submit',
                    handler : function() {
                    var UserFilePath = Ext.getCmp('LoadImage').getValue();
                    if(!CheckFileExt(UserFilePath,/.jpg|.gif|.png|.bmp/i))
                    {
                        alert('错误','您上传的文件不是图片类型，请重新选择！');
                        return;
                    }
                    if (!imgform.form.isValid()) {return;}
                    imgform.form.submit({
                        url : UploadProces,
                        waitMsg : '正在上传',
                        method : 'POST',
                        success : function(form, action) {
                            var element = document.createElement("img");
                            element.src = action.result.fileURL;
                            if(Ext.isIE)
                            {
                                if(XRange){
                                XRange.pasteHTML(element.outerHTML);
                                }
                                else{
                                editor.insertAtCursor(element.outerHTML);}
                            }
                            else
                            {
                                var selection = editor.win.getSelection();
                                if (!selection.isCollapsed) {
                                    selection.deleteFromDocument();
                                }
                                try{editor.insertAtCursor(element.outerHTML);}
                                catch(err){}
                                try{selection.getRangeAt(0).insertNode(element);}
                                catch(err){}
                            }
                            win.close();
                        },
                        failure : function(form, action) {
                            form.reset();
                            if (action.failureType == Ext.form.Action.SERVER_INVALID)
                                Ext.MessageBox.alert('警告',action.result.errors.msg);
                        }
                    });
                }
            }, {
                text : '关闭',
                type : 'submit',
                handler : function() {
                    win.close(this);
                }
            }]
        });

        var win = new Ext.Window({
                    title : "上传图片",
                    width : 300,
                    height : 'auto',
                    modal: true,
                    resizable: false,
                    border : false,
                    items : imgform

                });
        win.show();
    },
    
    //上传文件
    addFile : function() {
        var editor = this;
        var fileform = new Ext.FormPanel({
            region : 'center',
            labelWidth : 40,
            frame : true,
            bodyStyle : 'padding:5px 5px 0',
            autoScroll : true,
            border : false,
            fileUpload : true,
            items : [{
                        xtype: 'fileuploadfield',
                        id: 'LoadFile',
                        name: 'LoadFile',
                        emptyText: 'rar,doc,xsl,pdf',
                        fieldLabel: '文件',
                        buttonText: '',
                        allowBlank : false,
                        buttonCfg: 
                        {
                            iconCls: 'uploaddialog'
                        },
                        anchor : '98%'
                    }],
            buttons : [{
                    text : '上传',
                    type : 'submit',
                    scope: this,
                    handler : function() {
                    var UserFilePath = Ext.getCmp('LoadFile').getValue();
                    if(!CheckFileExt(UserFilePath,/.rar|.doc|.xls|.zip|.pdf/i))
                    {
                        alert('错误','可上传文件类型:rar,zip,doc,xls,pdf,请重新选择');
                        return;
                    }
                    if (!fileform.form.isValid()) {return;}
                    fileform.form.submit({
                        url : UploadProces,
                        waitMsg : '正在上传',
                        method : 'POST',
                        success : function(form, action) {
                            var element = document.createElement("a");
                            element.href = action.result.fileURL;
                            var fileExt=UserFilePath.substring(UserFilePath.lastIndexOf(".")+1).toLowerCase();
                            var fileName=UserFilePath.substring(UserFilePath.lastIndexOf("\\")+1).toLowerCase();
                            element.innerHTML='<img border="0" src="images/filetype/'+fileExt+'.gif"/>'+fileName;
                            if(Ext.isIE)
                            {
                                if(XRange){
                                XRange.pasteHTML(element.outerHTML);
                                }
                                else{
                                editor.insertAtCursor(element.outerHTML);}
                            }
                            else
                            {
                                var selection = editor.win.getSelection();
                                if (!selection.isCollapsed) {
                                    selection.deleteFromDocument();
                                }
                                try{editor.insertAtCursor(element.outerHTML);}
                                catch(err){}
                                try{selection.getRangeAt(0).insertNode(element);}
                                catch(err){}
                            }
                            win.close();
                        },
                        failure : function(form, action) {
                            form.reset();
                            if (action.failureType == Ext.form.Action.SERVER_INVALID)
                                Ext.MessageBox.alert('警告',action.result.errors.msg);
                        }
                    });
                }
            }, {
                text : '关闭',
                type : 'submit',
                handler : function() {
                    win.close(this);
                }
            }]
        });

        var win = new Ext.Window({
                    title : "上传文件",
                    width : 300,
                    height : 130,
                    resizable: false,
                    modal : true,
                    border : false,
                    layout : "fit",
                    items : fileform
                });
        win.show();
    },
    addCode:function(){
            var editor = this;
			var value="以下是引用片段：";
			var element = document.createElement("pre");
            element.setAttribute('style',this.codeFF);
            element.innerHTML=value;
			if(Ext.isIE)
            {
                if(XRange){
                XRange.pasteHTML(String.format(this.codeStyle,value));
                }
                else{
                editor.insertAtCursor(String.format(this.codeStyle,value));
                }
            }
            else
            {
                var selection = editor.win.getSelection();
                if (!selection.isCollapsed) {
                    selection.deleteFromDocument();
                }
                try{
                selection.getRangeAt(0).insertNode(element);
                }
                catch(err){editor.insertAtCursor(String.format(this.codeStyle,value));}
            }
	},
    

[spkl1]

csdn长度有限制

接上面

    createToolbar : function(editor) 
    {
        HTMLEditor.superclass.createToolbar.call(this, editor);
        this.tb.insertButton(16, 
        {
            cls : "x-btn-icon",
            icon : "images/icos/addimage.gif",
            handler : this.addImage,
            tooltip :
            { 
                title:'AddImage',
                text:'插入图片'
            },
            scope : this
        });
        this.tb.insertButton(17, 
        {
            cls : "x-btn-icon",
            icon : "images/icos/addfile.gif",
            handler : this.addFile,
            tooltip :
            { 
                title:'AddFile',
                text:'插入xls、doc、rar文件'
            },
            scope : this
        });
        
        this.tb.insertButton(18, 
        {
            cls : "x-btn-icon",
            icon : "images/icos/comment_edit.gif",
            handler : this.addCode,
            tooltip :
            { 
                title:'AddCode',
                text:'引用格式'
            },
            scope : this
        });
        
    }
});
Ext.reg('StarHtmleditor', HTMLEditor);

//判断是否是图片类型
function CheckFileExt(extstr,exg)
{
    var extstr = extstr.substring(extstr.lastIndexOf(".")).toLowerCase();
    if (!extstr.match(exg)) {
        return false;
    }
    return true;
}

[jnkaixin2009]

[Quote=引用 3 楼 spkl1 的回复:]
csdn长度有限制

接上面

JScript code

createToolbar : function(editor)
{
HTMLEditor.superclass.createToolbar.call(this, editor);
this.tb.insertButton(16,
{
……
[/Quote]















大哥，能不能加我的QQ说一下，我用了你的代码，有些地方还是跑步起来，QQ：369619017谢了

[sy_717]

element.src = action.result.fileURL;
这句我还是没明白什么意思，请高手帮忙给讲讲呗，fileURL是什么格式？是图片在服务器上的路径还是上传的本地路径？

[蓝指缘]

挺好的哈...

[蓝指缘]

挺好的好...