第1.4章 form表单图片添加后直接显示

很多时候在form表单中,我们希望添加图片,并且立马就能显示出来,象下面个图。左侧是没有添加图片的,右侧是添加图片的,怎么做得呢?
第1.4章 form表单图片添加后直接显示_第1张图片第1.4章 form表单图片添加后直接显示_第2张图片
1 form.jsp
html标签中enctype的属性值有application/x-www-form-urlencoded、multipart/form-data、text/plain,其中application/x-www-form-urlencoded是默认的设置,发送前对所有字符进行编码;multipart/form-data用于包含文件上传必须使用的;text/plain,空格转换为 “+” 加号,但不对特殊字符编码,这种我基本没有怎么用过。

form id="mainform" method="post" enctype="multipart/form-data"

看看下面的代码就知道了,其实放了一个没有大小type=file的input,被图片遮住了。


				商品图片:
				
					
				
			

2 form.js
这里对input定义了一个change事件,如果图片发生变化,则通过js显示出来。

function initActions() {
			$('#logoPicId').on('change', function() {
				DzmFrame.File.previewImage($("#logoPicId")[0]);
			});
		}

3 显示图片的js
下面js的左右,是将你上传的图片如何显示到页面的办法,也就是DzmFrame.File的具体代码。

var File = function(){
		var file = {};
		/**
		 * 图片预览
		 */
		file.previewImage = function(file){
			var browserVersion = window.navigator.userAgent.toUpperCase();
	      var MAXWIDTH  = file.parentNode.children[0].children[0].offsetWidth; 
	      var MAXHEIGHT = file.parentNode.children[0].children[0].offsetHeight;
	      var div = file.parentNode.children[0];
	      if (file.files && file.files[0])
	      {
	          div.innerHTML ='';
	          var img = div.children[0];
			  
	          img.onload = function(){
	            img.width  =  MAXWIDTH;
	            img.height =  MAXHEIGHT;
	          }
	          var reader = new FileReader();
	          reader.onload = function(evt){img.src = evt.target.result;}
	          reader.readAsDataURL(file.files[0]);
	      }
	      else //兼容IE   IE是用了滤镜
	      {
	        var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
	        file.select();
	        if (browserVersion.indexOf("MSIE 9") > -1) {
	            file.blur(); //不加上document.selection.createRange().text在ie9会拒绝访问
	         }
	        var src = document.selection.createRange().text;
	        
	        if (browserVersion.indexOf("MSIE 9") > -1 && src.indexOf("'") > -1) {
	       		alert("上传文件的路径不能包含特殊字符如:',\n请修改文件路径后重新上传。");
				file = $(file);
				file.after(file.clone(true).val(""));
				file.remove();
	       		return
	       	} 
	        div.innerHTML ='';
	        var img = div.children[0];
	        img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
	        div.innerHTML = "
"
; } } // return file; }();

你可能感兴趣的:(岁月会计云——前端开发,岁月云——Web系统最佳实践)