Extjs附件上傳並添加預覽功能

1.首先在Extjs中在form表單中添加filefield控件，用於選擇附件和上傳，預覽只針對圖片，代碼如下；

 {
            layout: 'hbox',
            border: false,
            items: [{
                xtype: 'filefield',
                name:'upload_image',
                flex: .9,
                name: 'AttachmentFileName',
                listeners: {
                    change:'onFileChange'
                }
                ,allowBlank: false
                ,validator: JsApp.com.Validator.checkFileFormatForImgageAndPdf

            }]
        }

2.在filefield控件后面添加一個圖片控件用於圖片預覽顯示，代碼如下；

{
         xtype: 'box',
        name: 'imageShow_box',
        hidden:true,    
        listeners: {
            render: 'onImageBoxRender'
        },
        autoEl: {
        tag: 'img',
        type: 'image',
        style: 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);width:140px;height:220px;text-align:center;margin:10px 0 0 0;',
         complete: 'off'
                
       }
 }    

3.訂閱filefield的change事件，在事件處理函數中實現，選擇不同的圖片后，顯示在image控件中：

 ///上傳附件修改后，如果選擇的文件是圖片格式的，則顯示一個圖片預覽
    onFileChange: function (fileUpload, newValue, oldValue) {
        var view = this.view,
            me = this,
            imageShow_box = view.down('box[name=imageShow_box]');

        if (JsApp.com.Validator.checkFileIsImage(newValue) == true) {

            if (fileUpload.fileInputEl && fileUpload.fileInputEl.el && fileUpload.fileInputEl.el.dom && fileUpload.fileInputEl.el.dom.files && fileUpload.fileInputEl.el.dom.files[0]) {
                var file = fileUpload.fileInputEl.el.dom.files[0],
                    imageShow_box_dom = imageShow_box.getEl().dom;

                if (window.URL) {
                    imageShow_box.setHidden(false);
                    imageShow_box_dom.src = window.URL.createObjectURL(file);
                }
                else if (window.webkitURL) {
                    imageShow_box.setHidden(false);
                    imageShow_box_dom.src = window.webkitURL.createObjectURL(file);
                }
            }

        }
        else {
            imageShow_box.setHidden(true);
        }

    },

　　在上面的代碼中，請注意獲取當前選中的圖片的方式是通過fileUpload.fileInputEl.el.dom.files[0]，通過這種方式，不是ExtJs提供的，這個是通過查看Dom獲取的，這種方式不能兼容所有的瀏覽器，比如在IE8上面就無法獲取到附件，所以IE8目前無法實現預覽的功能；

window.URL.createObjectURL(file)和window.webkitURL.createObjectURL(file)這兩個方法都是同樣的功能，只是瀏覽器不通過，支持的方法不同。這些方法就是通過獲取的file，
來得到一個可以直接在image控件顯示的src;