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

很多时候在form表单中，我们希望添加图片，并且立马就能显示出来，象下面个图。左侧是没有添加图片的，右侧是添加图片的，怎么做得呢？

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，被图片遮住了。

<tr>
				<td width="15%" style="text-align: right">商品图片：</td>
				<td width="35%">
					<div class="updateimg">
						<a href="javascript:void(0);"> <c:choose>
								<c:when
									test="${action == 'edit' && not empty smsMallCommodity.logoPic}">
									<img src="${ctx }/upload/${smsMallCommodity.logoPic}" />
								</c:when>
								<c:otherwise>
									<img src="../resources/images/add_img.jpg" />
								</c:otherwise>
							</c:choose>
						</a> <input class="file" type="file" id="logoPicId" name="logoPicName"
							accept="image/*">
					</div>
				</td>
			</tr>

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 ='<img class=imghead>';
	          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 ='<img class=imghead>';
	        var img = div.children[0];
	        img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
	        div.innerHTML = "<div style='width:"+MAXWIDTH+"px;height:"+MAXHEIGHT+"px;"+sFilter+src+"\"'></div>";
	      }
		}
		//
		return file;
	}();