首页 | 路由技术 | 交换技术 | 接入技术 | 综 合布线 | 网络管理 | 网络安全 | 操作系统 | 实用技巧 | 业界动态
最 新咨询 | 网络编程 | 软件编程 | 脚本技术 | 网页制作 | 网站技巧 | 数据库  | 精品收藏 | 免费资源 | 在线书店
当前位置: 首页 >天空618-IT技术 >网络编程 >Javascript >正文
关键字: 模糊搜索:

图片上传前预览和限制图片格式的JavaScript代码

发布时间:08-03-20 10:39:18      来源:天空618-IT技术     作者:admin
最新报道

图片上传前预览和限制图片格式
这是一则PHP图片上传的例子,这里想说明的是在上传图片前,当用户从本地或是远程选择图片时能够预览图片,由于上传的图片有大有小,宽窄不一,上传后我们都将对图片进行裁减处理,但是在上传前用户能否知道裁减后的效果呢?而且能否在提交前就告诉用户哪些图片格式是有效的呢?答案是肯定的,本例就是一个上载图片前预览图片,并按比例压缩的实际例子,代码很简单,主要是创建一个new Image(),然后给这个给这个image写入要显示的地方,而图片格式是否有效,是通过文件上的后缀来判断的,js里没有直接验证文件的格式的函数,需要通过substring()文件名最后一个.来判断。

本例效果虽然能实现,但在预览时仍有两个问题要注意
1,在Opera下,由于得不到上传框里的本地图片全部路径(只能得到文件名),所以无法预览图片。
2,用Firefox远程访问本文件时,出于安全原因,ff不允许预览本地的图片,在本地则可以。
注:这些在IE下均没有这些问题。
以下是本例的全部代码:
<html>
<head>
<title>上载文件表单</title></head>
<style>
#con { background-color:#c1c1c1}
#t{width:100px;float:left;clear:both;}
#con li{display:inline;}
#perDiv{position:absolute;width:210px;left:420px;height:210px;background-color:;align:center}
</style>
<body>
upload example for php by jarry!
<form enctype="multipart/form-data" action="upload.php" onsubmit="return sub(this)" name="uploadform" method="post">

<div id="perDiv" style="display:">
<br><br>这里是用来预览图片用
</div>

<div id="con">
<div id=t>请选择文件:</div>
<li><input name="upload_file" type="file" size="30" onchange="if(checkImgType(this.value)){perImg(this.value)};selectFile(document.uploadform.upload_file, document.uploadform.name)">(将远程图片的url粘贴进来也可以)</li><br>
<font size=-1>只接受后缀名为".gif",".jpg",".jpeg","png","bmp"的文件! </font><br>
<div id=t>名称:</div>

<li><input type=text value="11" size="30" name="name"></li><br>
<div id=t>描述:</div>
<li><textarea rows="5" cols="30" name="description">11</textarea></li><br>
<div id=t>上传人:</div>
<li><input type="text" value="11" size="40" name="uploader"></li><br>

<div id=t>&nbsp;</div><input type="submit" value="上传文件">  <a href="showimg.php">查看图片</a><br>

</div>
<div id="divinfo"><br></div>
</form>
<br clear="both">
<b><a href="showimg.php">查看上传图片列表</a></b><br>
<script type="text/javascript">

function selectFile(obj1,obj2){
    var filepath = obj1.value;
    if(filepath.lastIndexOf("\\")>0){
         filename= filepath.substring(filepath.lastIndexOf("\\")+1,filepath.length);
    }
    obj2.value = filename;//用来得到文件名;
}
var re;
var tempimg=new Image();//构建一个image对象,用来临时存取上传的图片信息
function perImg(o)
{//o是浏览上传的值;

isOpare=(navigator.userAgent.toLowerCase().indexOf("opera")!=-1

9 7 3 1 2 3 4 4 8 :


·上一篇文章:
·下一篇文章:
[ 返回上一页 ]字体[  ] [ 打印 ] [ 发送好友:发送给好友 ][ 加入收藏:加入收藏夹 ]
 
发表评论 ?
  相关文章
相关文章

· 可关闭,最大化,新窗口用层模拟的网页浏览器
· JavaScript面向对象编程
· textarea支持图形编辑的实现方法
· 关于javascript参数的问题
· javascript中eval函数的用法与说明
· 完美解决JS中汉字显示乱码问题
· javascript的调试工具下载
· javascript之操作文件(Files)实例说明
· javascript之操作文件(Files)
· javascript之操作文件夹(Folders)
最新文章
· 图片上传前预览和限制图片格式的
· 汉字转换为拼音 PHP代码推荐
· 简体中文转换为繁体中文的PHP代码
· Google网页版Google Earth SKY 
· 互联网将遭遇“千年虫”式问题 3
· 申请国际信用卡,注册Paypal(完全
· 网络购物诈骗三种主要类型
· Paypal帐户注册要点(必读)
· 安全使用paypal
· 微软虚拟化操作系统Server 2008问
· Cisco系统报错解决方案
· 现近家名是什么意思
· 管理IP地址的技术手段
· Cisco交换机Catalyst功能对比
· 破解网络密码(十法)
· 防止下载,网络畅通
· 路由器密码设置(加注意要点)
· iPhone SDK受追捧 前四天下载量突
· 防木马软件avg主程序 AVGAntiSpy
· 保证支付宝帐户的安全,必看