点击图片上传图片并显示

这几天在做一个图片上传的功能，说实话没想到这个功能用了我那么长的时间。
项目原来有图片上传功能，具体的做法是选择上传图片，弹出一个文件上传窗口，里面有几个文件上传按钮，选好要上传的文件后点击“上传”，文件上传到服务器，返回一个jsp页面，jsp页面自动执行在后台设定的js方法，将父窗口对应img标签的src属性修改。
现在要做改进，不通过弹出窗口，点击页面上的一个缩略图片，弹出文件选择，选择好文件后自动上传图片并将图片和对应大图显示为上传的图片。
刚开始我设想的很简单：
   1. 在页面中加入隐藏input type="file"标签，定义其onchange事件
   2. 定义缩略图的onclick事件，触发file的click事件
   3. 定义uploadFile方法，使用ajaxUploadFile控件将文件上传
   onchange方法触发本地图片预览方法，触发uploadFile方法
这样做在ff和chrome下都没有问题，但是在用ie浏览器测试的时候就不行了，原因是uploadFile方法执行时没有向后台发送数据，查了之后才知道原来ie浏览器为了安全性考虑对file上传只用鼠标点击file标签才会有效，通过js触发file标签的click方法行不通。
郁闷，ie太挫了
好吧，要改进也挺简单就是把file标签设成透明的，和img放在一起，并设置width，height把它撑大，这样点击图片的时候触发的实际上就是file标签的click事件了
这下文件向后台上传没问题了，但是用ie测试的时候还是出问题了，就是图片预览的时候我获取了file的本地路径，用js改变img的src属性出了个很奇怪的问题：有的图片可以显示，有的不能显示，而且不能显示的图片src修改后为空
网上查解决方法，说是用滤镜可以显示，

if (file.files && file.files[0]) {
		var reader = new FileReader();
		reader.onload = function(evt) {//火狐chrome...
			img.style.backgroundImage = "url('" + evt.target.result + "')";
			img.src = evt.target.result;
		}
		reader.readAsDataURL(file.files[0]);
	} else // 兼容IE
	{
		var imgSrc = document.selection.createRange().text;
		img.src="";
		img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=bEnabled,sizingMethod='scale')";
		img.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
	}

试了下，显示倒是可以显示，但是图片角上有个红色的小叉号，怎么看怎么难看，不过功能倒是全了，先放着吧
另外还有一中解决方法就是用div的背景模拟img，这样可以用js修改div的backgroundImage的url来达到显示图片的效果，但是在ie下背景图片的大小无法控制，超级难看！


本地预览效果达不到，退而求其次，经过尝试先将图片上传上去，根据返回的url修改img的src可以达到效果（这个跟上面ie用js修改src属性方法一样，但是返回的是http：//...jpg）
要注意一点
ajax获取servlet返回值如果文本中包含'&'，在ajax中解析出来会是"$amp;"所以要处理一下。