Java周结之文件上传预览

本片博客主要内容：jsp+java实现图片上传可以预览原图的功能。
效果图如下:

这个功能就可以避免放上错误的图片；还可以查看图片原图效果。

那么该怎么实现呢？
大体思路：

<input type="file" name="myFile"/>

文件表单有一个change事件，文件的路径就是表单的value值。当文件路径发生改变也就是更换了上传文件，就会触发change事件。然后我们就可以通过jq&&js来修改预览框img、div的属性了。

jsp代码如下：

<table id="datashow" style="position: relative;">
<form action="AddLineType" enctype="multipart/form-data" method="post">
	<tr>
		<td>
			<label for="typeName">线路类型名:</label>
			<input type="text" name="typeName" id="typeName" value="" />
		</td>
	</tr>
	<tr>
		<td>
			<!-- 预览图片位置 -->
			<img id="myFile1" src="images/show.png" width="80" height="80" class="previewImg">
		</td>
	</tr>
	<tr>
		<td>
			<label for="myFile1">线路类型图标</label>
			<input type="file" name="myFile1" class="myFile" id="myFile_1" value="" />
			<!-- <input type="button" value="添加" id="btn"/> -->
			<input type="submit" value="添加" />
		</td>
		<td>
			<!-- 预览原图div容器绝对定位 -->
			<div id="preview" style="position: absolute;"></div>
		</td>
	</tr>
</form>
</table>

绑定文件表单的change事件和img标签的移入、动（mouseover、mousermove）移出（mouseout）事件：

$(function() {
		//1.绑定change事件
		$(".myFile").change(function() { 			//上传文件预览效果
			var url = null; 						//创建生成地址的空变量
			var name = $(this).attr("name"); 		//得到表单名
			var index = parseInt(name.charAt(6) - 1); //获取文件集合的下表
			/* var fileObj = document.getElementById("myFile").files[0]; //得到input的第一个文件js写法 */
			var fileObj = $(".myFile")[index].files[0]; 	//得到文件对象
			//2.得到文件的绝对路径地址（由于浏览器的安全机制，原路径会被隐藏替换成fakepath）
			if (window.createObjcectURL != undefined) {
				url = window.createOjcectURL(fileObj); 		//创建的地址
			} else if (window.URL != undefined) {
				url = window.URL.createObjectURL(fileObj);
			} else if (window.webkitURL != undefined) {
				url = window.webkitURL.createObjectURL(fileObj);
			}
			//3.修改img标签的src属性，换成刚刚上传的文件路径
			$("#" + name).attr("src", url); 			//更改预览图片地址
		});
		//4.预览原图效果
		/* 根据页面鼠标位置显示图片预览 */
		var ya = $("#preview"); //得到预览图的容器div
		ya.hide(); //隐藏该div
		$(".previewImg").mouseover(function() { 		//绑定对img绑定鼠标移入事件
			ya.html('<img src = "' + this.src + '"/>').show(); //将原图路径放入div并且显示
			$(this).mousemove(function(e) {
				//5.绑定鼠标移动事件，使div跟随鼠标显示 
				ya.css({ 								//根据鼠标位置显示图片
					top: e.pageY, 						//设置div的top（纵坐标）
					left: e.pageX 						//设置div的left（横坐标）
				});
			});
		});
		$(".previewImg").mouseout(function() { //绑定移出事件，移出隐藏div
			ya.hide();
		});
	});

好了，页面的效果就完成了，下面就要将页面的文件保存到web项目里。

文件保存操作：
1.需要下面红色框框里的jar包，并且将这几个包拷到lib目录下。

2.创建servlet接受请求
（1）设置文件上传的属性

		//创建SmartUpload()对象
	  SmartUpload su = new SmartUpload(); 
	  su.setCharset("utf-8");
	  su.initialize(this.getServletConfig(), request, response);//初始化
	  //设置单个文件最大值
	  su.setMaxFileSize(1024*1024*10);
	  //设置表单所有文件最大值
	  su.setTotalMaxFileSize(1024*1024*100);
	  //设置上传文件格式
	  su.setAllowedFilesList("jpg,png,gif");

（2）创建自定义目录upload保存文件到自定义目录

try {
			su.upload();
			String typeName = su.getRequest().getParameter("typeName");
			if ((typeName != "") && (typeName != null)) {
				String houZhuiMing = null;
				// 获取并保存文件
				for (int i = 0; i < su.getFiles().getCount(); i++) {// 修改文件名
					File files = su.getFiles().getFile(i);
					houZhuiMing = files.getFileExt();//获取后缀名
					String path = "upload\\" + RandomOrderNumber.testP("IG")//这里是一个静态的随机数生成方法
							+ "." + houZhuiMing;
					icon = path;
					files.saveAs(path, su.SAVE_VIRTUAL);
				}

文件会保存到tomcat的工作空间，在myeclipse的工作空间是没有文件的。

以上可以都可以做多个文件上传的操作，看懂了就可以在下面扩展了。
放一个多个文件上传的动图：

欢迎留言吐槽。