JS上传图片预览及图片限制
HTML代码:
<form action="__SELF__" method="post" enctype='multipart/form-data'>
<input type='hidden' name='biaozhi' value='1' />
<label><span>认证类型:</span><font size='2px'>营业执照号</font></label>
<label>
<span>执照照片:</span>
<div class="add-img" style="width:70px;height: 70px;border: 1px solid #CCCCCC;text-align: center;line-height: 70px;background: #CCCCCC;color: #fff;margin-left: 100px"><input name='nature_pic' type="file" id='pic' style="display: none;width:70px;height: 70px">+
<img style="display:none; width:70px;height:70px;margin-top:-70px" src="" id="oImg"/>
</div>
<font>只需上传公司营业执照照片,客服MM会快速帮您完善企业信息</font>
</label>
<lable><span> </span></lable>
<label style="margin-top:50px"><input type="submit" value="保存信息" class="sub" /><a href="###" class="chongzhi">重置</a></label>
</form>
JS代码:
<script>
//营业执照照片
/////////////////////////////////////// 上传图片显示功能部分
$("#pic").change(function(){
//判断图片的限制
var filepath=$("input[name='nature_pic']").val();
var extStart=filepath.lastIndexOf(".");
var ext=filepath.substring(extStart,filepath.length).toUpperCase();
if(ext!=".BMP"&&ext!=".PNG"&&ext!=".GIF"&&ext!=".JPG"&&ext!=".JPEG"){
alert("图片限于bmp,png,gif,jpeg,jpg格式");
return false;
}
var file_size = 0;
file_size = this.files[0].size;
var size = file_size / 1024;
if(size > 1024)
{
alert('上传的文件大小不能超过1M');
return false;
}
//判断图片限制结束
var objUrl = getObjectURL(this.files[0]) ;
alert(objUrl);
if (objUrl) {
$("#oImg").attr("src", objUrl).css("display","block");
// img图片的Id
}
}) ;
// 将flie的url 转换为可以 负值的src 地址;
function getObjectURL(file) {
var url = null ;
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}
</script>
JS上传图片预览及图片限制的更多相关文章
- JS 上传图片 + 预览功能(一)
JS 上传图片 + 预览功能 <body> <input type="file" id="fileimg1" style="disp ...
- js:s上次预览,上传图片预览,图片上传预览
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js上传图片&预览(filereader)
fileReader HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型. FileRea ...
- 原生XMLHTTPResponse,jQuery-Ajax 上传文件;iframe上传图片&预览;图片验证码小案例
原生AJAX Ajax主要就是使用 [XmlHttpRequest]对象来完成请求的操作,该对象在主流浏览器中均存在(除早起的IE),Ajax首次出现IE5.5中存在(ActiveX控件) 1.Xml ...
- html js 上传图片 预览
第一段代码是我自己修改之后能够多选显示多预览图,也就是加了个循环,后面的代码是一些解释说明之类的,抄的 <!DOCTYPE html> <html> <head> ...
- JS 上传图片 + 预览功能(二)
简单粗暴 直接进入主题: Html <script src="../js/jquery-2.1.1.min.js"></script> <style& ...
- 简单实现JS上传图片预览功能
HTML代码 <div class="upload"> <input type="button" class="btn" ...
- js上传图片预览
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js 上传图片预览
<script language='javascript'> function show(){ var p=document.getElementById("file1" ...
随机推荐
- [1-3] 把时间当做朋友(李笑来)Chapter 3 【提高心智,和时间做朋友】 摘录
1. 精确感知时间 我有个朋友叫做时间.她跟我真可算作两小无猜,默默陪了二十多年我才开始真正认识她.她原本没有面孔,却因为我总是用文字为她拍照,而因此可以时常伴我左右.她原本无情,我却可以把她当作朋友 ...
- ZooKeeper_基础知识学习
ZooKeeper是Hadoop的开源子项目(Google Chubby的开源实现),它是一个针对大型分布式系统的可靠协调系统,提供的功能包括:配置维护.命名服务.分布式同步.组服务等. Zookee ...
- php类库PHP QR Code 二维码
php类库PHP QR Code 二维码 php类库PHP QR Code 二维码 php类库PHP QR CodePHP QR Code is open source (LGPL) library ...
- 敲敲SQL语句
基本命令 查看数据库:show databases; 选择数据库:use mysql_crash; 连接数据库:需要:主机名,端口,合法用户名,用户口令 mysql -u ben -p -h loca ...
- Android Studio 使用笔记:快捷键
开发工具中的快捷键是必不可少了,AS中在Help菜单中单击 Default Keymap Reference 浏览器会连接到官网,打开对应你操作系统的快捷键页面,这是一个pdf文件.Mac系统独立一份 ...
- 机器人的运动范围 剑指offer66题
include "stdafx.h" #include<vector> #include<algorithm> #include<string> ...
- Yarn源码分析之MRAppMaster:作业运行方式Local、Uber、Non-Uber
基于作业大小因素,MRAppMaster提供了三种作业运行方式:本地Local模式.Uber模式.Non-Uber模式.其中, 1.本地Local模式:通常用于调试: 2.Uber模式:为降低小作业延 ...
- MySQL 5.7以上 root用户默认密码问题
废话少说一句话系列: CentOS系统用yum安装MySQL的朋友,请使用 grep "temporary password" /var/log/mysqld.log 命令,返回结 ...
- Win10秘笈:两种方式修改网卡物理地址(MAC)
每台能够上网的电脑都有网卡,不管是有线还是无线,网卡本身都得有物理地址,也就是MAC(Media Access Control 或 Medium Access Control)地址.这个地址理论上是固 ...
- Mybatis+MSSql插入数据的同时并获取自增的ID
在项目中遇到这样的情况,新增一个角色,这个角色有某些权限,这两个数据存在不同的表中,一个是sys_role,另外一个是sys_role_permission表,注意,现在的逻辑是这样的 1,在表sys ...