最近做一个系统时,在人员信息采集的时候。遇到将人员照片采集上。想试下选择本地照片然后可以再网页上显示。在网上搜索了诸多材料,然后根据前辈们的总结。封装了一个控件。
下面说一下控件页面。我想点击一下button按钮。然后即可使用fileupload选取照片,然后根据此路径显示本地图片。下面直接粘贴代码,直接将此代码复制到新建的用户控件就可以使用。
页面HTML代码:
<table align="left" width="100%" height="100%" border="0">
<tr>
<td id="WebPic" runat="server">
<asp:Image ID="imgShow" runat="server" ImageUrl="#" Height="98px" Width="70px"></asp:Image>
</td>
<td id="LocalPic" runat="server">
<div id="imgsrc">
</div>
</td>
</tr>
<tr>
<td colspan="2">
<input id="btnImg" style="width: 136px; height: 24px" type="button" value="选择照片"
name="btnImg" runat="server" οnmοuseοver="movebtnFile(this)" />
<input id="btnFile" type="file" name="btnFile" runat="server" οnchange="CheckImage(this);"
style="filter: alpha(opacity=0); width: 30px; position: absolute" />
</td>
</tr>
</table>
页面上的JS代码:
<script language="jscript" type="text/jscript">
var ImageUrl = null;
function CheckImage(e) {
var prefix = e.id.substring(0, e.id.indexOf("_btnFile"));
if (ImageUrl == null) {
ImageUrl = document.all(prefix + "_imgShow").src;
}
if (document.all(prefix + "_btnFile").value.length > 0) {
document.getElementById(prefix + "_WebPic").style.display = "none";
document.getElementById(prefix + "_LocalPic").style.display = "block";
PreviewImg(prefix + "_btnFile")
}
}
function SelectImage(e) {
document.all(prefix + "_btnFile").click();
if (document.all(prefix + "_btnFile").value.length == 0)
return;
document.all(prefix + "_imgShow").src = document.all(prefix + "_btnFile").value;
}
function movebtnFile(e) {
var prefix = e.id.substring(0, e.id.indexOf("_btnImg"));
var btn = document.all(prefix + "_btnFile");
btn.style.offsetTop = event.srcElement.offsetTop;
var x = event.x - btn.offsetWidth / 2;
if (x < event.srcElement.offsetLeft) {
x = event.srcElement.offsetLeft;
}
/*
if(x>event.srcElement.offsetLeft+event.srcElement.offsetWidth-btn.offsetWidth)
{
x=event.srcElement.offsetLeft+event.srcElement.offsetWidth-btn.offsetWidth
}
*/
btn.style.posLeft = x;
}
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 obj.files.item(0).getAsDataURL(); }
return obj.value;
} return obj.value;
}
}
function PreviewImg(imgFile) {
//新的预览代码,支持 IE6、IE7。
var upFile = document.getElementById(imgFile);
var imgsrc = document.getElementById("imgsrc");
imgsrc.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale)";
imgsrc.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = getPath(upFile);
imgsrc.style.width = "70px";
imgsrc.style.height = "98px";
}
</script>
封装的控件,就可以通过button选择照片。然后显示本地图片。