ajax+fromData 上传图片

最新推荐文章于 2024-04-29 15:23:59 发布

manshi_it

最新推荐文章于 2024-04-29 15:23:59 发布

阅读量5k

点赞数 2

分类专栏： JAVA 文章标签： ajax 图片 eclipse

本文链接：https://blog.csdn.net/manshi_it/article/details/52174896

版权

前台部分：

1.图片文件需要预览，网页因安全考虑，不允许image加载本地路径图片，借鉴滤镜法进行图片预览

html部分：

<label class="form-label col-xs-4 col-sm-3">照片：</label>
				<div class="col-xs-8 col-sm-9">
					<img class="col-xs-4 col-sm-3 " id="serverImage" name="serverImage">

依然使用image作为图片容器

js部分：

function srcChanged(imagId,fileId){
		 var pic = document.getElementById(imagId);
	        var file = document.getElementById(fileId);
	        if(window.FileReader){//chrome,firefox7+,opera,IE10,IE9，IE9也可以用滤镜来实现
	           oFReader = new FileReader();
	           oFReader.readAsDataURL(file.files[0]);
	           oFReader.onload = function (oFREvent) {pic.src = oFREvent.target.result;};        
	        }
	        else if (document.all) {//IE8-
	            file.select();
	            var reallocalpath = document.selection.createRange().text//IE下获取实际的本地文件路径
	            if (window.ie6) pic.src = reallocalpath; //IE6浏览器设置img的src为本地路径可以直接显示图片
	            else { //非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片，但是可以通过滤镜来实现，IE10浏览器不支持滤镜，需要用FileReader来实现，所以注意判断FileReader先
	                pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaIma