java点击图片上传_jsp中点击图片弹出文件上传界面及实现预览实例详解

jsp中点击图片弹出文件上传界面及实现预览实例详解

花了两天时间琢磨一下图片预览的功能

任务需求如下：

1：jsp页面中有一个图片(pic_1)

2：点击图片弹出类似于资源管理器的界面

3：选择完某一个图片之后在pic_1处预览

我在ie8上试验下面这段代码，可以实现上述功能，没有在别的浏览器中测试，如果各位朋友知道多种浏览器的支持方法，请赐教，共同学习，谢谢。

insert title here

function tempclick(){

/**

* 火狐浏览器实现点击图片出现文件上传界面

* var a=document.createevent("mouseevents");

* a.initevent("click", true, true);

* document.getelementbyid("upload_main_img").dispatchevent(a);

*/

//ie浏览器实现点击图片出现文件上传界面

document.getelementbyid('main_img').click(); //调用main_img的onclick事件

}

/**

* 预览图片

* @param obj

* @returns {boolean}

*/

function previewimg(obj) {

var newpreview = document.getelementbyid("img_2");

var imgpath = getpath(obj);

alert(imgpath);

if( !obj.value.match( /.jpg|.gif|.png|.bmp/i ) ){

alert("图片格式错误！");

return false;

}

newpreview.style.filter = "progid:dximagetransform.microsoft.alphaimageloader(sizingmethod=scale)";

newpreview.filters.item("dximagetransform.microsoft.alphaimageloader").src = imgpath;

}

/**

* 得到图片绝对路径

* @param obj

* @returns

*/

function getpath(obj){

if(obj) {

if(navigator.useragent.indexof("msie")>0) {

obj.select();

//ie下取得图片的本地路径

return document.selection.createrange().text;

} else if(isfirefox=navigator.useragent.indexof("firefox")>0) {

if (obj.files) { // firefox下取得的是图片的数据

return files.item(0).getasdataurl();

}

return obj.value;

}

return obj.value;

}

}

简单的对代码做一下讲解：

input type="file"  这个元素我试过让style隐藏(style=“display:none”)，这样就不能或得到绝对路径，而是fakepath，为了不让它显示出来就让他100%的透明，下面有一个div，id为img_2,这个div是页面初始图片，点击这个图片调用input type="file" 中的方法，实现此功能。

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

希望与广大网友互动？？

点此进行留言吧！