表单中头像处理判断及回显

<script type="text/javascript">
 var staticNum = 0;

 function previewNewAvatar(uri, from) {
     staticNum = 0;
     var span = document.getElementById("CurrentAvatar");
     var flag11 = document.getElementById("hiddenflag1");
     var flag12 = document.getElementById("hiddenflag2");
     if (from == "signature") {
         span = document.getElementById("signature");
     }
     var form = document.getElementById("editprofile");
     if (from == "Album") {
         span.innerHTML = "<img id='showface' src='http://image.taobao.com/forum/gallery/" + uri + "' alt='' />";
     } else {
         if (uri != null) {
             var uris = uri.split(".");
             if (uris[uris.length - 1].toUpperCase() == 'GIF' || uris[uris.length - 1].toUpperCase() == "JPG" || uris[uris.length - 1].toUpperCase() == "JPEG") {
                 uri = "file:///" + uri;
                 //alert(from);
                 if (from == "signature") {
                     span.innerHTML = "<img id='showsign' src='" + uri + "' alt='' onload='return detectSign();'/>";
                 } else {
                     span.innerHTML = "<img id='showface' src='" + uri + "' alt='' onload='return detectFlower();'/>";
                 }
             } else {
                 alert("请上传jpg,jpeg或者gif格式的图片哦!");
                 span.innerHTML = "<img src='' alt='请选择合适的图片!' heigth='120' width='120' />";
                 //form.reset();
                 if (from == "signature") {
                     flag11.value = 1;
                 } else {
                     flag12.value = 1;
                 }
                 return;
             }
         }
     }
 }

 function imgExceedSize(w, h, value) {
     var flag21 = document.getElementById("hiddenflag1");
     var flag22 = document.getElementById("hiddenflag2");
     var show = document.getElementById("showface");
     var span = document.getElementById("CurrentAvatar");
     if (value == "signature") {
         show = document.getElementById("showsign");
         span = document.getElementById("signature");
     }
     var form = document.getElementById("editprofile");
     //alert("width:"+show.width);
     //alert("height:"+show.height);
     if (show.width > w || show.height > h) {
         alert("图像尺寸:" + show.width + "X" + show.height + "。/n图像尺寸过大!你只能上传尺寸为 " + w + "×" + h + "的图像,请重新浏览图片!");
         span.innerHTML = "<img src='' alt='请选择合适的图片!' width='120' width='120'>";
         //form.reset();
         if (value == "signature") {
             //alert("signature flag1:" + flag21);
             flag21.value = 1;
         } else {
             //alert("no flag1:" + flag22);
             flag22.value = 1;
         }
         return false;
     } else {
         if (value == "signature") {
             //alert("signature flag1:" + flag21);
             flag21.value = 0;
         } else {
             //alert("no flag1:" + flag22);
             flag22.value = 0;
         }
         return true;
     }
 }
 function detectFlower() {
     if (0 == staticNum) {
         staticNum++;
         var ok = imgExceedSize(120, 120, 'CurrentAvatar');
     }
 }
 function detectSign() {
     if (0 == staticNum) {
         staticNum++;
         var ok = imgExceedSize(468, 60, 'signature');
     }
 } -->
</script>
<hr />
<div class="FormElement">
    <label>
        头像:
    </label>
    <div>
        <input name="_fmf.edi._0.a" id="ep.pic1" type="radio" value="1" tabindex="1"
        />
        <label for="ep.pic1">
            启用
        </label>
        <input name="_fmf.edi._0.a" id="ep.pic2" type="radio" value="0" tabindex="2"
        checked="checked" />
        <label for="ep.pic2">
            关闭
        </label>
        <p>
            启用此选项,你发表的每一个帖子左侧将显示您的头像。
        </p>
    </div>
</div>
<div class="FormElement">
    <label>
        当前头像:
    </label>
    <div id="CurrentAvatar">
        无头像
    </div>
</div>
<input type="hidden" name="_fmf.edi._0.av" value="0" />
<input type="hidden" name="_fmf.edi._0.user" value="" />
<div class="FormElement">
    <label>
        上传新头像:
    </label>
    <div>
        <input id="headpicture" name="userAvatar" type="file" tabindex="3" onchange="previewNewAvatar(this.value,'currentavatar')"
        />
        <p>
            要求:图片尺寸最大120*120像素,文件大小100k以内(支持JPG,GIF)。
        </p>
    </div>
</div>
<div class="FormElement">
    <label>
        系统相册:
    </label>
    <div>
        <input name="new_avatar_uri" id="NewAvatarURI" type="hidden" value=""
        />
        <input name="open_avatar_list" type="button" tabindex="4" value="打开系统相册"
        onclick="javascript:window.open('forumPic.htm');" />
        <p>
            从系统相册中选择一个头像(如果您的浏览器打开了屏蔽弹出窗口的功能,请关闭)。
        </p>
    </div>
</div>

<form action="#" id="AvatarSelector">
    <table border="0" cellpadding="3" cellspacing="0" width="100%" class="AvatarList">
        <tr>
            <td>
                <input type="radio" name="avatarselect" value="002/icons-302.gif" />
                <img src="http://image.taobao.com/forum/gallery/002/icons-302.gif" alt="Icons-302"
                title="Icons-302" />
            </td>
            <td>
                <input type="radio" name="avatarselect" value="002/icons-306.gif" />
                <img src="http://image.taobao.com/forum/gallery/002/icons-306.gif" alt="Icons-306"
                title="Icons-306" />
            </td>
            <td>
                <input type="radio" name="avatarselect" value="002/icons-307.gif" />
                <img src="http://image.taobao.com/forum/gallery/002/icons-307.gif" alt="Icons-307"
                title="Icons-307" />
            </td>
            <td>
                <input type="radio" name="avatarselect" value="002/icons-308.gif" />
                <img src="http://image.taobao.com/forum/gallery/002/icons-308.gif" alt="Icons-308"
                title="Icons-308" />
            </td>
            <td>
                <input type="radio" name="avatarselect" value="002/icons-309.gif" />
                <img src="http://image.taobao.com/forum/gallery/002/icons-309.gif" alt="Icons-309"
                title="Icons-309" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="radio" name="avatarselect" value="002/icons-302.gif" />
                <img src="http://image.taobao.com/forum/gallery/002/icons-302.gif" alt="Icons-302"
                title="Icons-302" />
            </td>
            <td>
                <input type="radio" name="avatarselect" value="002/icons-306.gif" />
                <img src="http://image.taobao.com/forum/gallery/002/icons-306.gif" alt="Icons-306"
                title="Icons-306" />
            </td>
            <td>
                <input type="radio" name="avatarselect" value="002/icons-307.gif" />
                <img src="http://image.taobao.com/forum/gallery/002/icons-307.gif" alt="Icons-307"
                title="Icons-307" />
            </td>
            <td>
                <input type="radio" name="avatarselect" value="002/icons-308.gif" />
                <img src="http://image.taobao.com/forum/gallery/002/icons-308.gif" alt="Icons-308"
                title="Icons-308" />
            </td>
            <td>
                <input type="radio" name="avatarselect" value="002/icons-309.gif" />
                <img src="http://image.taobao.com/forum/gallery/002/icons-309.gif" alt="Icons-309"
                title="Icons-309" />
            </td>
        </tr>
    </table>
</form>
<hr />
<div style="text-align:center;">
    <input type="button" name="submitavatar" value="选择头像" class="mainoption"
    onclick="doSelect();" />
</div>
<script type="text/javascript">
 function doSelect() {
     var x = document.getElementById("AvatarSelector").avatarselect;
     for (var i = 0; i < x.length; i++) {
         if (x[i].checked) {
             window.opener.document.getElementById("NewAvatarURI").value = x[i].value;
             window.opener.previewNewAvatar(x[i].value, "Album");
             window.close();
         }
     }
 }
</script>

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理

相关文章

开始在上面输入您的搜索词,然后按回车进行搜索。按ESC取消。

返回顶部