ssm图片上传预览功能的三种实现方式

 

       一：利用绝对路径实现：图片上传预览功能的实现最简单的方式就是获取上传图片的绝对路径，但出于安全的考虑，除了ie能直接访问本地文件的绝对路径，其它浏览器用fakepath掩盖了路径或者禁止访问，部分浏览器还可以调用特殊方法获得文件上传的绝对路径，像360，搜狗等用户普遍使用的浏览器是不允许访问本地路径的。像这种浏览器，一种就是修改设置允许访问本地路径，另一种就是换一种思路啦。这里简单介绍ie,搜狐通过访问本地图片路径实现图片上传预览功能。

 function checkimg(obj){
    	//获取到上传文件的路径
    	var filename = obj.value;
    	//只能上传图片格式的文件
    	var index = filename.lastIndexOf(".");
    	var name =filename.substring(filename.lastIndexOf("."));
    	if(name!=".jpg"&&name!=".png"&&name!=".gif"){
    		alert("只能上传.jpg.png.gif文件");
    		obj.value="";
    	}else{
    		realPath=getPath(obj);//获取文件上传的路径,网上的代码，试了下ie火狐能用，谷歌不能用
    	 document.getElementById("img").src=realPath;
    	}
    }
 function getPath(obj) {//获取绝对路径函数
     if(obj)
 {  
     if (window.navigator.userAgent.indexOf("MSIE")>=1)
    {
        obj.select();
        return document.selection.createRange().text;
    }   
     else if(window.navigator.userAgent.indexOf("Firefox")>=1)
     {
        if(obj.files)
         {
                return window.URL.createObjectURL(obj.files[0]);
          }
          return obj.value;
     }
    return obj.value;
}
 }

二：利用相对路径实现：比较麻烦的一种，有的浏览器不能访问本地图片的绝对路径，所以就想可以访问相对路径啊，但是这样做的前提就是必须上传文件到文件上传的位置，通过访问相对路径访问到文件上传位置里的图片，但这只是预览，如果更换图片的话上一个图片就不要了，所以必须添加一个删除图片的方法。这种方法虽然不适用，但是可行，这里就不写代码实现了。

三：利用base64编码实现：base64可以对图片的内容进行编码，js中FileReader对象的readAsDataURL方法，可以把图片数据转成base64字符串数据，然后把这个base64字符串数据赋值给一个图片标签的src，浏览器获得这个base64编码格式的字符串后再解析成图片。

//input标签，获取本地图片


//预览图片标签
 


 function uploadImg(fileDom) {

    // 获取图片数据对象
    var file = fileDom.files[0];
//对图片内容进行base64编码
    var reader = new FileReader();
    reader.readAsDataURL(file);

    //确保文件成功获取，base64数据量比较大
    reader.onload = function (event) {
        var e = event || window.event
        var img = document.getElementById("viewImg");
        img.src = e.target.result;
        //或者 img.src = this.result; 因为e.target == this
    }
}