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

我做的源代码是：

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的纸扫描上去的图片就有点看不清楚了，我想，能不能在图片很大，超出了给定的预览框范围的时候，出现滚动条来按图片原来大小预览该图片。请各位高手指教。