EXT 文件本地预览

NFA_YY

于 2017-06-23 09:32:33 发布

阅读量562

点赞数

分类专栏： extjs

本文链接：https://blog.csdn.net/NFA_YY/article/details/73613351

版权

extjs 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<%String path = request.getContextPath(); %>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="<%=path %>/content/scripts/extjs/resources/css/ext-all.css">
<script type="text/javascript" src="<%=path %>/content/scripts/extjs/ext-base.js"></script>
<script type="text/javascript" src="<%=path %>/content/scripts/extjs/ext-all.js"></script>
<script type="text/javascript" src="<%=path %>/content/scripts/extjs/ext-lang-zh_CN.js"></script>
</head>
<script type="text/javascript">
var newsrc = '<%=request.getAttribute("newsrc")%>';
var picturePanel;
var img_reg = /\.([jJ][pP][gG]){1}$|\.([jJ][pP][eE][gG]){1}$|\.([gG][iI][fF]){1}$|\.([pP][nN][gG]){1}$|\.([bB][mM][pP]){1}$/;
var buildPicturePanel = function(){			
	picturePanel = new Ext.form.FormPanel({
		id:'image-upload-form',
		renderTo:'picView',
		style : 'margin-left:20px;margin-top:20px',
		//frame:true,
		labelAlign:'right', //标签位置
        labelWidth:110,
        buttonAlign : 'center', //按钮位置    
		border:false,
		isAdd:false,
		enctype: 'multipart/form-data',
		fileUpload : true,
		layout : 'form',
		items:[{
		   id : 'file-idx',
	       name : 'file',
	       inputType : "file",
	       fieldLabel : '学校平面图',
	       xtype : 'textfield',
	       blankText:'上传图片不能为空',
	       anchor : '100%' 
		},{
		   xtype : 'box',   
	       id : 'browseImage',
	       fieldLabel : "预览图片",   
	       autoEl : {
	           width : 450,
	           height:400,
	           border:true,
	           tag : 'img',
	            // type : 'image',
	         //  src : '<%=path%>/upload/imgDB/'+newsrc,
	           style : 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);',   
	           complete : 'off',   
	           id : 'imageBrowse'
	       }
		}
		],
		listeners : {   
	        'render' : function(f) {
	            //
	            this.form.findField('file-idx').on('render', function() {
	                //通過change事件,图片也动态跟踪选择的图片变化
	                Ext.get('file-idx').on('change',
                        function(field, newValue, oldValue) {
	                	//得到选择的图片路径
                        var url = 'file://'+ Ext.get('file-idx').dom.value;
                        alert("url = " + url);   
                        //是否是规定的图片类型
                        if (img_reg.test(url)) {
                            if (Ext.isIE) {
                                var image = Ext.get('imageBrowse').dom;   
                            	image.src = Ext.BLANK_IMAGE_URL;// 覆盖原来的图片
                            	alert(url);
                            	image.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = url;   
                            	
                            }// 支持FF
                            else {
                                Ext.get('imageBrowse').dom.src = Ext.get('file-idx').dom.files.item(0).getAsDataURL();
                            }
                        }
                    }, this);   
	            }, this);   
	        }   
	    }, 
	    buttons:[{
	    	text:'图片上传',
            handler:function() {
	    	    var furl="";
	    	    furl = Ext.getCmp('image-upload-form').form.findField('file').getValue();
				var type = furl.substring(furl.length - 3).toLowerCase();
				if (furl == "" || furl == null) {
					return;
				}
				if (type != 'jpg' && type != 'bmp' && type != 'gif' && type != 'png') {
					alert('仅支持jpg、bmp、gif、png格式的图片');
					return;
				}
    	   
	    	   Ext.getCmp('image-upload-form').form.submit({
		  			clienValidation:true,
		  			waitMsg:'正在上传请稍候',
		  			waitTitle:'提示',
		  			url:'<%=path %>/schoolInfo/uploadImg.do?schoolId='+schoolId,
		  			method:'POST',
		  			success:function(form,action){
		  				//Ext.Msg.alert('信息',action.result.msg);
	    		   		//Ext.getCmp('image-upload-form').form.el.dom.reset();
	    		   		if (Ext.isIE) {
	    		   			var i_image = Ext.get('imageBrowse').dom;
	    		   			i_image.src = Ext.BLANK_IMAGE_URL;
	    		   			i_image.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = Ext.BLANK_IMAGE_URL;
	    		   		}else{
	    		   			Ext.get('imageBrowse').dom.src = Ext.BLANK_IMAGE_URL;
	    		   		}
	    		   		
	    		   		//win_uploadImage.hide();
		    	   	},
		  			failure:function(form,action){
		    	   		Ext.MessageBox.show({title: '失败',msg: '上传失败!',buttons: Ext.MessageBox.OK,icon: Ext.MessageBox.ERROR});
		  		 	}
	    	   });
       		}
	    }]  
	});
};
var initComponent = function(){
	buildPicturePanel();
};
Ext.onReady(function(){
	   initComponent();
	   Ext.QuickTips.init();
});
	
</script>
<body>
<center>
	<div id="picView" style="width: 600px;height: 500px;"></div>
</center>
</body>
</html>

NFA_YY

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
EXT 文件本地预览

pageEncoding="UTF-8"%>Insert title here/content/scripts/extjs/resources/css/ext-all.css">/content/scripts/extjs/ext-base.js">/content/scripts/extjs/ext-all.js">/content/scripts/extjs/ext-lang-zh_CN.js
复制链接

扫一扫