最近工作中涉及到了圖片的預(yù)覽效果，但是沒有達(dá)到老總的要求。在頁面中要求有一個(gè)瀏覽圖片的組件，一個(gè)預(yù)覽圖片的區(qū)域以及調(diào)用掃描儀，上傳圖片的按鈕。

我做的源代碼是：

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 : "預(yù)覽掃描件",
     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();
   }
  }]
 })
 // 在指定區(qū)域顯示選中的圖片文件
 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;// 獲取當(dāng)前選擇的圖片的路徑

      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();

}

在這個(gè)窗口中，瀏覽圖片的路徑填入之后，在下面的預(yù)覽框中會(huì)按比例顯示選擇的路徑下的圖片。但是如果是A4的紙掃描上去的圖片就有點(diǎn)看不清楚了，我想，能不能在圖片很大，超出了給定的預(yù)覽框范圍的時(shí)候，出現(xiàn)滾動(dòng)條來按圖片原來大小預(yù)覽該圖片。請各位高手指教。