您现在的位置: 365建站网 > 365学习 > Extjs 2.0 图片预览求助

Extjs 2.0 图片预览求助

文章来源:365jz.com     点击数:1257    更新时间:2009-10-27 09:54   参与评论

 最近工作中涉及到了图片的预览效果,但是没有达到老总的要求。在页面中要求有一个浏览图片的组件,一个预览图片的区域以及调用扫描仪,上传图片的按钮。

我做的源代码是:

uploadImage = function(keyName, keyValue, tableName, blobName) {
 var electron_form = new Ext.form.FormPanel({
  url : "employeeManage.jhtml?method=saveElec",
  width : 550,
  height : 700,
  labelWidth : 80,
  labelAlign : "left",
  frame : true,
  fileUpload : true,
  defaults : {
   xtype : "field",
   width : 450
  },
  items : [{
     xtype : "hidden",
     name : "uid",
     value : id
    }, {
     id : 'imageUpload',
     name : 'imageUpload',
     fieldLabel : "选择扫描文件",
     inputType : "file"
    }, {
     id : 'browseImage',
     fieldLabel : "预览扫描件",
     autoCreate : {
      width : 450,
      height : 600,
      tag : 'input',
      type : 'image',
      src : Ext.BLANK_IMAGE_URL,
      style : 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);',
      name : 'imageBrowse'
     }
    }],
  buttons : [{
   text : '扫描仪',
   handler : function() {
    try{
     b = new ActiveXObject("wscript.shell");
     b.run("ScanDrv.exe");
    }catch(Exception){
     Ext.Msg.alert("信息提示:","请您先安装扫描仪!");
    }
    }

  }, {
   text : "上传",
   handler : function() {
    var imagePath = Ext.getCmp("imageUpload").getValue();
    if (imagePath == '') {
     Ext.Msg.alert("信息提示", "您还没有选择图片!");
    } else {
     Ext.MessageBox.show({
        msg : '正在上传,请稍等...',
        progressText : 'Saving...',
        width : 300,
        wait : true,
        waitConfig : {
         interval : 200
        },
        icon : 'download',
        animEl : 'saving'
       });
     electron_form.form.submit({
        url : "Action/UploadImageServlet",
        method : "POST",
        params : {
         keyName : keyName,
         keyValue : keyValue,
         tableName : tableName,
         blobName : blobName
        },
        success : function(form, action) {
         var temp = action.result.success;
         if (temp == "true") {
          Ext.MessageBox.alert("信息提示", "上传成功!");
         } else {
          Ext.MessageBox.alert("信息提示!", "上传失败!");
         }
        },
        failure : function(form, action) {
         Ext.MessageBox.alert("信息提示!", "保存失败!");
        }
       });
    }
   }
  }, {
   text : "取消",
   handler : function() {
    electron_win.close();
   }
  }]
 })
 // 在指定区域显示选中的图片文件
 electron_form.on('render', function(f) {
  electron_form.form.findField('imageUpload').on('render', function() {
   Ext.get('imageUpload').on('change',
     function(field, newValue, oldValue) {
      var url = 'file:///' + Ext.get('imageUpload').dom.value;// 获取当前选择的图片的路径

      if (Ext.isIE7) {
       var image = Ext.get('imageBrowse').dom;
       image.src = Ext.BLANK_IMAGE_URL;// 覆盖原来的图片
       image.filters
         .item("DXImageTransform.Microsoft.AlphaImageLoader").src = url;
      } else {
       Ext.get('imageBrowse').dom.src = url;
      }
     }, this);
  }, this);
 }, this);
 var electron_win = new Ext.Window({
    id : "electron_add_win",
      layout : 'fit',
    width : 605,
    height : 700,
    labelWidth : 80,
    labelAlign : 'right',
    buttonAlign : 'center',
    modal : true,
    resizable : false,
    frame : true,
    animal : true,
    items : [electron_form]
   })
 electron_win.show();

}

在这个窗口中,浏览图片的路径填入之后,在下面的预览框中会按比例显示选择的路径下的图片。但是如果是A4的纸扫描上去的图片就有点看不清楚了,我想,能不能在图片很大,超出了给定的预览框范围的时候,出现滚动条来按图片原来大小预览该图片。请各位高手指教。

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛

发表评论 (1257人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
昵称:
最新评论
------分隔线----------------------------
大家感兴趣的内容
最近更新的内容

快速入口

· 365软件
· 建站公司
· 杰创官网
· 建站工具

业务咨询

· 技术支持
· 服务时间:9:00-18:00
365建站网二维码

Powered by 365建站网 RSS地图 HTML地图

copyright © 2013-2022 版权所有 鄂ICP备17013400号-1