`
jinyanhui2008
  • 浏览: 312392 次
  • 性别: Icon_minigender_1
  • 来自: 青岛
社区版块
存档分类
最新评论

js实现计算上传图片大小,并预览效果

阅读更多
<script language="JavaScript" type="text/JavaScript">
<!-- 
var flag=false; 
function DrawImage(ImgD){ 
var image=new Image(); 
image.src=ImgD.src; 
if(image.width>0 && image.height>0){ 
flag=true; 
if(image.width/image.height>= 300/200){ 
if(image.width>300){ 
ImgD.width=300; 
ImgD.height=(image.height*300)/image.width; 
}else{ 
ImgD.width=image.width; 
ImgD.height=image.height; 
} 
ImgD.alt=image.width+"×"+image.height; 
} 
else{ 
if(image.height>200){ 
ImgD.height=200; 
ImgD.width=(image.width*200)/image.height; 
}else{ 
ImgD.width=image.width; 
ImgD.height=image.height; 
} 
ImgD.alt=image.width+"×"+image.height; 
} 
} 
} 
//--> 

function changesrc(){
 document.yourpic.src = document.getElementsByName("filename")[0].value;
 DrawImage(yourpic);

 var   img   =   new   Image();    
    img.src   =   document.yourpic.src;
 alert("fileSize = "+ img.fileSize/1024 +" KB");  
}
</script>
<table width="100%" border="0">
      <tr>
       <td>
       <div align="center"><img border="1" name="yourpic" onload="javascript:DrawImage(this);">
       </div>
       </td>
      </tr>
      <form name="picForm" action="#" method="post" enctype="multipart/form-data" onsubmit="return checkPic(picForm);">
      <tr>
       <td>
       <div align="center"><input type="file" name="filename" onchange="changesrc()"></div>
       </td>
      </tr>
      <tr>
       <td>
       <div align="center"><input type="submit" value="上传照片" /></div>
       </td>
      </tr>
      </form>
      </table>

 

3
0
分享到:
评论

相关推荐

    程序天下:JavaScript实例自学手册

    15.19 判断上传图片的大小 15.20 上传图片时预览 15.21 对联广告 15.22 带关闭的对联广告 15.23 到边界反弹的漂浮图片 15.24 用键盘控制图片移动 15.25 预装载图片提高站点速度 15.26 始终在屏幕右下角的图片 15.27 ...

    《程序天下:JavaScript实例自学手册》光盘源码

    15.19 判断上传图片的大小 15.20 上传图片时预览 15.21 对联广告 15.22 带关闭的对联广告 15.23 到边界反弹的漂浮图片 15.24 用键盘控制图片移动 15.25 预装载图片提高站点速度 15.26 始终在屏幕右下角的图片 15.27 ...

    JS等比例缩小图片尺寸的实例

    JS等比例缩小图片尺寸的实例,需要的朋友可以参考一下

    前端添加水印的vue组件

    只需要传入你想添加的水印内容,会自动去计算水印的数量和大小。其他的完全不用你去关心。 使用方法:在你需要的地方向引用组件一样引用它就ok了 watermark 水印的内容 &lt;zmm-watermark :watermark="watermark"&gt;&lt;/...

    PHP开发实战1200例源码

    实例177 上传图片预览 214 实例178 去掉下拉选项的边框 215 实例179 修改表单属性为弹出窗口 216 实例180 表单输入单元的文字设置 217 实例181 表单输入单元单击删除 218 实例182 表单文本输入的移动选择 219 实例...

    PHP开发实战1200例(第1卷).(清华出版.潘凯华.刘中华).part1

    实例177 上传图片预览 214 实例178 去掉下拉选项的边框 215 实例179 修改表单属性为弹出窗口 216 实例180 表单输入单元的文字设置 217 实例181 表单输入单元单击删除 218 实例182 表单文本输入的移动选择 219 实例...

    PHP开发实战1200例(第1卷).(清华出版.潘凯华.刘中华).part2

    实例177 上传图片预览 214 实例178 去掉下拉选项的边框 215 实例179 修改表单属性为弹出窗口 216 实例180 表单输入单元的文字设置 217 实例181 表单输入单元单击删除 218 实例182 表单文本输入的移动选择 219 实例...

    filepond-plugin-image-resize::framed_picture:将图像尺寸调整说明添加到放置在FilePond上的文件中

    FilePond的图像调整大小插件 图像调整大小插件会自动计算并添加调整大小信息。 使用此信息显示正确的预览。 使用此信息来转换图像,然后再将其上传到服务器。

    动易专业版——Upgrade_SiteFactory.Professional_2.5.2.0-2.5.3.0的升级包

    ●图片水印透明度的默认配置为100%,导致未更改配置的网站水印看不到效果。 ●节点IP访问限制白名单只有最后一行的白名单有效。 ●会员管理兑换有效期的时间计算不正确。 ●在不同的专题类别下,不能添加同名的...

    PHP和MySQL Web开发第4版pdf以及源码

    1.11 计算表单总金额 1.12 理解操作符的优先级和结合性: 1.13 使用可变函数 1.13.1 测试和设置变量类型 1.13.2 测试变量状态 1.13.3 变量的重解释 1.14 根据条件进行决策 1.14.1 if语句 1.14.2 代码块 ...

    PHP和MySQL WEB开发(第4版)

    2.8.2 确定文件大小:filesize() 2.8.3 删除一个文件:unlink() 2.8.4 在文件中定位:rewind()、fseek()和ftell() 2.9 文件锁定 2.10 更好的方式:数据库管理系统 2.10.1 使用普通文件的几个问题 2.10.2 RDBMS是...

    PHP和MySQL Web开发第4版

    1.11 计算表单总金额 1.12 理解操作符的优先级和结合性: 1.13 使用可变函数 1.13.1 测试和设置变量类型 1.13.2 测试变量状态 1.13.3 变量的重解释 1.14 根据条件进行决策 1.14.1 if语句 1.14.2 代码块 ...

    【最新版】wechat_devtools_1.02.2004020.dmg【亲测可用】最好的微信开发者工具

    F 修复 工具预览/上传提示文件已经存在的问题 反馈详情 F 修复 调试器放大会导致 inspect 按钮样式异常的问题 F 修复 模拟器工具栏样式异常 F 修复 wx.addPhoneContact时顶部按钮显示错误的问题 反馈详情 F 修复...

    asoft签到管理系统tykq3.5_build20110125

    10、为附件箱图片增加预览功能 11、修复登录验证码开关的小BUG 12、CSS调整,增加style文件夹,统一放置CSS 13、修改签到组弹出框样式 14、修改在线更新版本对比代码段,修正了一个无外网连接时AJAX机制报错的BUG ...

    文章管理系统

    2.纠正采集的图片标签中有js脚本时,可能会造成图片获取不到的BUG 3.友情链接管理,到期日期加入快捷的1、3、6、12个月的选择按钮 4.sitemap加入最后更新时间 5.对首页最新评论和最新留言中连续数字或者连续字母进行...

Global site tag (gtag.js) - Google Analytics