JS 自动识别上传图片的宽高并且可以联动修改(联动效果,不变形)

-------------- js代码

 

<script>
function func()
{
var oImg=new Image();
var lj =document.getElementById("FileUpload1").value;
oImg.src=lj;
document.getElementById("TextBox3").value =oImg.width;
document.getElementById("TextBox4").value =oImg.height;
 Label1.innerHTML =oImg.width;
 Label2.innerHTML =oImg.height;
}
    function  wriet_value()  
        {  
               var tb5 = Label1.innerHTML;//存了的宽
               var tb6 = Label2.innerHTML;//存了的高
              
               var tb3 =document.getElementById("TextBox3").value;
               var tb4 =document.getElementById("TextBox4").value;
              
               var tb = tb6/tb5;

              document.getElementById("TextBox4").value=(tb*tb3).toFixed(0);
             
          }
              function  wriet_value1()  
        {  
               var tb5 = Label1.innerHTML;//存了的宽
               var tb6 = Label2.innerHTML;//存了的高
              
               var tb3 =document.getElementById("TextBox3").value;
               var tb4 =document.getElementById("TextBox4").value;
              
               var tb = tb5/tb6;

              document.getElementById("TextBox3").value=(tb*tb4).toFixed(0);
             
          }
</script>

 

 

---------页面代码

 

 

 <table align="center" border="0" cellpadding="0" cellspacing="0" class="bg3" style="height: 318px">
            <tr>
                <td align="center" background="images/hbj.gif" class="font1" colspan="5" style="height: 14px">
                    <strong>添加客户样稿</strong></td>
            </tr>
            <tr>
                <td align="right" bgcolor="#fbfbfb" class="style1" style="width: 212px; height: 30px">
                    <span class="font1">样稿名称:&nbsp;</span></td>
                <td align="left" bgcolor="#fbfbfb" class="font1" colspan="2" style="width: 441px">
                    <asp:TextBox ID="TextBox1" runat="server" MaxLength="45" Width="314px"></asp:TextBox>
                </td>
                <td align="right" bgcolor="#fbfbfb" colspan="1" style="width: 80px">
                    <span class="font1">&nbsp;</span></td>
                <td align="left" bgcolor="#fbfbfb" colspan="1" width="380">
                </td>
            </tr>
            <tr>
                <td align="right" bgcolor="#fbfbfb" class="style1" style="width: 212px; height: 30px">
                    <span class="font1">样稿类型:&nbsp;</span></td>
                <td align="left" bgcolor="#fbfbfb" class="font1" colspan="2" style="width: 441px">
                    <asp:TextBox ID="TextBox2" runat="server"  MaxLength="35" Width="215px" ></asp:TextBox></td>
                <td align="right" bgcolor="#fbfbfb" colspan="1" style="font-size: 12pt; width: 80px;
                    font-family: Times New Roman">
                </td>
                <td align="left" bgcolor="#fbfbfb" colspan="1" style="font-size: 12pt; font-family: Times New Roman"
                    width="380">
                </td>
            </tr>
            <tr>
                <td align="right" bgcolor="#fbfbfb" class="style1" style="width: 212px; height: 30px">
                    <span class="font1">样稿上传:&nbsp;</span>
                </td>
                <td align="left" bgcolor="#fbfbfb" class="font1" colspan="4" style="height: 30px">
                    &nbsp;<asp:FileUpload ID="FileUpload1" runat="server" οnchange="func()"/>&nbsp;
                    图片宽:<asp:Label ID="Label1" runat="server"></asp:Label>&nbsp; 图片高:<asp:Label
                        ID="Label2" runat="server"></asp:Label></td>
                       
            </tr>
            <tr>
                <td align="right" bgcolor="#fbfbfb" class="style1" style="width: 212px; height: 30px">
                    <span class="font1" style="background-color: #fbfbfb">图片设定:&nbsp;</span></td>
                <td align="left" bgcolor="#fbfbfb" class="font1" colspan="4" style="height: 30px; background-color: #fbfbfb;">
                    &nbsp;宽:<asp:TextBox ID="TextBox3" runat="server" MaxLength="4" οnkeyup="wriet_value();this.value=this.value.replace(/[^/d]/g,'')"
                        Width="71px">1003</asp:TextBox>
                    高:<asp:TextBox ID="TextBox4" runat="server" MaxLength="4" οnkeyup="wriet_value1();this.value=this.value.replace(/[^/d]/g,'')"
                        Width="71px">768</asp:TextBox>(默认图片大小&nbsp; <font color="red">可修改</font>)</td>
            </tr>
            <tr>
                <td align="right" bgcolor="#fbfbfb" class="style1" style="width: 212px; height: 30px">
                    <span class="font1" style="background-color: #fbfbfb">弹框设定:&nbsp;</span></td>
                <td align="left" bgcolor="#fbfbfb" class="font1" colspan="4" style="height: 30px; background-color: #fbfbfb;">
                    &nbsp;宽:<asp:TextBox ID="TextBox5" runat="server" MaxLength="4" οnkeyup="this.value=this.value.replace(/[^/d]/g,'')"
                        Width="71px">1003</asp:TextBox>
                    高:<asp:TextBox ID="TextBox6" runat="server" MaxLength="4" οnkeyup="this.value=this.value.replace(/[^/d]/g,'')"
                        Width="71px">768</asp:TextBox>(默认1003*768&nbsp; <font color="red"> 可修改</font>)</td>
            </tr>
            <tr>
                <td align="right" bgcolor="#fbfbfb" class="style1" height="26" style="width: 212px">
                    &nbsp;</td>
                <td align="left" bgcolor="#fbfbfb" colspan="4" height="40">
                    <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Admin/images/按钮/tja.gif"
                        OnClick="ImageButton1_Click" /></td>
            </tr>
        </table>

 

 

---web.config 配置

 

 

    <httpRuntime maxRequestLength="1024000" useFullyQualifiedRedirectUrl="true"
executionTimeout="300" minFreeThreads="8" minLocalRequestFreeThreads="4"
appRequestQueueLimit="100"  requestLengthDiskThreshold="100" enableVersionHeader="true"/>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值