文章浏览 复制本页面地址

input type=file 上传预览图片

[code]

<style>
.file-box{ position:relative;width:340px;height:20px}
.file{ position:absolute; top:0; right:80px; height:24px; filter:alpha(opacity:0);opacity: 0;width:260px }
</style>
<form action="{:U('Index/doedit')}" method='post' enctype ="multipart/form-data" name="f1">
<div id="localImag">
<img id='preview'  src="__ROOT__/Public/index/images/nophoto.jpg" width="115" height="115">
</div>
<div>

<div>
<span class='txt-span'>头&nbsp;&nbsp;&nbsp;像:</span>
<input type='button'  value='浏览...' style="width:147px;margin-bottom:10px;border:1px solid #B6B6B6;height:30px;"/>
<input type="file" name='stu_img' id='uploadfile' size="28" onchange="javascript:setImagePreview('uploadfile','preview','localImag')"/>
</div>

=======================JS 代码============================

//下面用于图片上传预览功能
function setImagePreview(fileinputid,showimgid,loadimgid) {
var docObj=document.getElementById(fileinputid);

var imgObjPreview=document.getElementById(showimgid);
if(docObj.files &&docObj.files[0])
{
//火狐下,直接设img属性
//imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '115px';
imgObjPreview.style.height = '115px';
//imgObjPreview.src = docObj.files[0].getAsDataURL();

if (window.navigator.userAgent.indexOf("Chrome") >= 1 || window.navigator.userAgent.indexOf("Safari") >= 1) {
imgObjPreview.src = window.webkitURL.createObjectURL(docObj.files[0]);
}else {
//火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
}
}
else
{
//IE下,使用滤镜
docObj.select();
var imgSrc = document.selection.createRange().text;
var localImagId = document.getElementById(loadimgid);
//必须设置初始大小
localImagId.style.width = "115px";
localImagId.style.height = "115px";
//图片异常的捕捉,防止用户修改后缀来伪造图片
try{
localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
}
catch(e)
{
alert("您上传的图片格式不正确,请重新选择!");
return false;
}
imgObjPreview.style.display = 'none';
document.selection.empty();
}
return true;
}

 

[/code]

标签:
上一篇:
下一篇: