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;