同样还是图片预览问题~！谢谢大家。希望大家给个方法

xupeihuagudulei 2009-11-02 01:19:07

没有接触过ext
自己技术也差吧

脑子也转不过弯来
希望大家给出代码，方案。谢谢了
如下图

...全文

341 36 打赏收藏转发到动态举报

写回复

用AI写文章

36 条回复

切换为时间正序

请发表友善的回复…

发表回复

modery1 2011-05-26

打赏
举报

学习了

阿非 2009-11-04

打赏
举报



<ext:Window ID="Window1" runat="server" Icon="Image" Title="With PostBack" ShowOnLoad="false"

        Resizable="false" X="250" Y="100">

        <Body>

            <img id='img' onload='imgLoad(this);' />

        </Body>

    </ext:Window>



<ext:Anchor Horizontal="95%">

                   <ext:FileUploadField ID="FileUploadFieldEn" runat="server" EmptyText="请选择产品相关图片"

                        FieldLabel="产品图片(英文)" ButtonText="" Icon="ImageAdd">                        

                        <Listeners>

                            <FileSelected  Handler="showBtn('FileUploadFieldEn');"  />

                        </Listeners>                        

                    </ext:FileUploadField> 

                    </ext:Anchor>

<ext:Anchor Horizontal="95%">

                    <ext:FileUploadField ID="FileUploadFieldCh" runat="server" EmptyText="请选择产品相关图片"

                        FieldLabel="产品图片(中文)" ButtonText="" Icon="ImageAdd">

                        <Listeners>

                            <FileSelected  Handler="showBtn('FileUploadFieldCh');"  />

                        </Listeners>   

                    </ext:FileUploadField>

                </ext:Anchor>

阿非 2009-11-04

打赏
举报



<script>

        var showBtn = function(name) {

            var label = Ext.getDom(name).parentNode.parentNode.parentNode.children[0];

            if (label.innerHTML.indexOf("预览") == -1) {

                label.innerHTML = label.innerHTML + "<div style='position:absolute;left:86;top:3;z-index:6;'><a href='javascript:void 0;' onclick='showImg(\"" + name + "\");' >预览</a></div>";

            }            

        }

        var showImg = function(name) {



            var v = Ext.get(name).getValue();

            var img = Ext.getDom('img');

            img.src = 'file:///' + v;

            

            var ms = new Date().getMilliseconds();            

            for (var i = 0; i <10000; i++) {

                if (new Date().getMilliseconds() > ms + 200) {

                    break;

                }

            }            

        }

        var imgLoad = function(obj) {

        Window1.setWidth(obj.width + 15);        

        Window1.setHeight(obj.height + 32);

        Window1.show();

        }

    </script>

xupeihuagudulei 2009-11-02

打赏
举报

多谢阿非，这样的话应该可以了
我先忙会，等下就开项目来试试

阿非 2009-11-02

打赏
举报



    <script>

        var showBtn = function() {

            Ext.getDom('span').style.display = '';

        }

        var showImg = function() {

            var v = FileUploadField2.getValue();

            Ext.getDom('img').src = 'file:///' + v;

            var div = Ext.getDom('centerLayer');

            div.style.display = v && v != '' ? '' : 'none';

        }

    </script>

阿非 2009-11-02

打赏
举报

<ext:FileUploadField ID="FileUploadField2" runat="server" Width="400" Icon="Attach">

        <Listeners>

            <FileSelected Fn="showBtn" />

        </Listeners>

    </ext:FileUploadField>

    <span id="span" style="display: none;">

        <ext:Button ID="btnView" runat="server" Text="预览">

            <Listeners>

                <Click Handler="showImg();" />

            </Listeners>

        </ext:Button>       

    </span>

    <div   id="centerLayer" style="position:absolute;left:200px;top:30px;z-index:6;display:none;">   

  <img id='img' align="middle"   />  

  <ext:Button runat="server" Text="关闭">

            <Listeners>

                <Click Handler="Ext.getDom('centerLayer').style.display='none';" />

            </Listeners>

        </ext:Button>  

  </div>

igelf 2009-11-02

打赏
举报

win7~

xupeihuagudulei 2009-11-02

打赏
举报

[Quote=引用 26 楼 sandy945 的回复:]
CooliteToolkit ?
[/Quote]阿非看样子第三方组件都很熟悉

xupeihuagudulei 2009-11-02

打赏
举报

[Quote=引用 26 楼 sandy945 的回复:]
CooliteToolkit ?
[/Quote]是的，我昨天刚弄的这个，
原来之前根本没听过extjs
哎，OUT

RUNBEAR 2009-11-02

打赏
举报

帮顶

阿非 2009-11-02

打赏
举报

CooliteToolkit ?

zhouxingyu896 2009-11-02

打赏
举报

学习

学习

xupeihuagudulei 2009-11-02

打赏
举报

我的版本好像是0.8

xupeihuagudulei 2009-11-02

打赏
举报

[Quote=引用 22 楼 sandy945 的回复:]
编译成DLL 了？
你用的版本是否有 FileUploadField ？
[/Quote]有的，我就是用了这个控件
现在就是想把这控件改成可以点击它链接到另一个地址去看图片这样的

阿非 2009-11-02

打赏
举报

编译成DLL 了？
你用的版本是否有 FileUploadField ？

xupeihuagudulei 2009-11-02

打赏
举报

哎，不过阿非你写的这个我还是不明白。
我这个ext已经编译成dll了。

你的意思是把那个下载来的改成自己需要的功能再打包？

xupeihuagudulei 2009-11-02

打赏
举报

呵呵，看样子还是阿非明白我这等菜鸟啊

happy664618843 2009-11-02

打赏
举报

帮顶

马老虎 2009-11-02

打赏
举报

帮你顶下吧实在不知道是什么

阿非 2009-11-02

打赏
举报

extJS 下载之后有个 examples 的文件夹，找到 form\file-upload.html

浏览看下效果，然后修改同级目录下的 file-upload.js



/*!

 * Ext JS Library 3.0.0

 * Copyright(c) 2006-2009 Ext JS, LLC

 * licensing@extjs.com

 * http://www.extjs.com/license

 */



Ext.onReady(function(){



    Ext.QuickTips.init();



    var msg = function(title, msg){

        Ext.Msg.show({

            title: title,

            msg: msg,

            minWidth: 200,

            modal: true,

            icon: Ext.Msg.INFO,

            buttons: Ext.Msg.OK

        });

    };



    var fibasic = new Ext.ux.form.FileUploadField({

        renderTo: 'fi-basic',

        width: 400

    });



    new Ext.Button({

        text: 'Get File Path',

        renderTo: 'fi-basic-btn',

        handler: function(){

            var v = fibasic.getValue();

            msg('Selected File', v && v != '' ? v : 'None');

        }

    });



new Ext.Button({

        text: 'View Image',

        renderTo: 'fi-basic-btn',

        handler: function(){

            var v = fibasic.getValue();

            document.getElementById('img').src='file:///'+v;

            document.getElementById('img').style.display=v && v != '' ? '':'none';

            

        }

    });





    var fbutton = new Ext.ux.form.FileUploadField({

        renderTo: 'fi-button',

        buttonOnly: true,

        listeners: {

            'fileselected': function(fb, v){

                var el = Ext.fly('fi-button-msg');

                el.update('<b>Selected:</b> '+v);

                if(!el.isVisible()){

                    el.slideIn('t', {

                        duration: .2,

                        easing: 'easeIn',

                        callback: function(){

                            el.highlight();

                        }

                    });

                }else{

                    el.highlight();

                }

            }

        }

    });



    var fp = new Ext.FormPanel({

        renderTo: 'fi-form',

        fileUpload: true,

        width: 500,

        frame: true,

        title: 'File Upload Form',

        autoHeight: true,

        bodyStyle: 'padding: 10px 10px 0 10px;',

        labelWidth: 50,

        defaults: {

            anchor: '95%',

            allowBlank: false,

            msgTarget: 'side'

        },

        items: [{

            xtype: 'textfield',

            fieldLabel: 'Name'

        },{

            xtype: 'fileuploadfield',

            id: 'form-file',

            emptyText: 'Select an image',

            fieldLabel: 'Photo',

            name: 'photo-path',

            buttonText: '',

            buttonCfg: {

                iconCls: 'upload-icon'

            }

        }],

        buttons: [{

            text: 'Save',

            handler: function(){

                if(fp.getForm().isValid()){

	                fp.getForm().submit({

	                    url: 'file-upload.php',

	                    waitMsg: 'Uploading your photo...',

	                    success: function(fp, o){

	                        msg('Success', 'Processed file "'+o.result.file+'" on the server');

	                    }

	                });

                }

            }

        },{

            text: 'Reset',

            handler: function(){

                fp.getForm().reset();

            }

        }]

    });



});