上传控件选择完图片后将其立即显示在页面上(jquery ajax)

       最近做了一个个人博客系统，在添加修改“博主信息”功能中有一项选择头像，用过<input type="file" />控件的都知道，选择完图片之后显示的只是文件的名字，而我想将图片显示在页面上，初步的想法是选择完图片后提交到后台，然后返回图片的地址，在刷新页面，图片就可以成功的显示在页面上了，但是这种做法让用户的体验很差，我只是单单的选择了一个头像页面就要刷新吗？显然这样是行不通的，所以我决定用ajax异步提交图片到后台，这样就无需再刷新页面了。这里我使用了jquery提供的ajax异步提交。首先要引入jquery所需的js文件

<script  src="你的路径/jquery-form.js"></script>
<script  src="你的路径/jQuery.js"></script>

表单的部分

  由于<input  type="file" />控件的外观比较丑陋，而且选择完文件后还会显示文件名，所以，我将它设置为透明属性，然后通过点击“更换头像”按钮来调用上传文件控件的click（）来达到选择文件的目的

<form action="admin/blogger/upload.do" id="form"  method="post" enctype="multipart/form-data">
				<div>
					博主头像：<input id="file"  name="file" type="file" οnchange="upload()" style="position: absolute; filter: alpha(opacity = 0); opacity: 0; width: 30px;"/>
				</div>
				<div style="width: 200px;height: 220px; border:3px solid #9bdf70;">
					<img id="image" alt="" src="${pageContext.request.contextPath}/static/images/head.jpg" width="194" height="214">
				</div>
				<div>
					<input type="button" value="更换头像" οnclick="chooseImage()" />
				</div>
			</form>

js代码

这里我的文件路径和名称使用的是固定的，没有从后台获取，也就是无论选择什么图片传到后台后都会以这个名称来为该图片命名。

url地址后加Math.random()是因为IE的缓存，当我们使用了相同的url地址时浏览器就会从缓存中查到图片，结果导致图片不会改变，当url后加了random之后url的地址基本可以保证每次都是不同的，也就能正确的显示图片了。

至于ajaxSubmit（options）options是提交表单所需要设置的一些参数url:提交到后台的地址,type ：是以get提交还是post提交dataType：返回的数据类型 success:提交成功后执行的回调函数，errer：失败后执行的回调函数,其他的我就不多说的想了解更多的同学可以查找相关资料深入研究

注意：由于jquery-form.js版本的问题导致了可能提交成功了但是执行的回调函数确实error，（比如我正在用的版本，找了好半天才找出来原因。。）

function chooseImage() {
		$("#file").click();		
	}
	function upload(){
		var options={
				url:'后台地址',
				type:'POST',
				dataType:'script',
				success:function(){
					var url="/MyBlog/static/images/head.jpg?"+Math.random();
					var url=$('#image').attr('src',url);
				}
			};
			 $("#form").ajaxSubmit(options);  
	         return false;  
	}

后台我使用的是SpringMVC框架，由于上传文件的代码该框架都有封装所以使用起来非常简单，代码也就几行。没用过SpringMVC的同学可以直接使用Servlet或者其他的框架等，方法可以百度。

@RequestMapping(value="upload")
	public void upload(@RequestParam(value="file",required=false)MultipartFile file,HttpServletRequest request,HttpServletResponse response) throws Exception{
		String path = request.getSession().getServletContext().getRealPath("static/images"); 
		path+="/head.jpg";
		file.transferTo(new File(path));
	}

最后上一张粗糙的效果图