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" ...
随机推荐
- iOS开发-XCode常用快捷键整理
前言:如果我们能够掌握并巧妙地使用快捷键,可以大大加快我们的工作效率,这个对经常使用快捷键的人们来说,应该很容易理解.因此我们需要做的是,针对于自己经常使用的快捷键去进行记忆.我不会推荐你们去把所有的 ...
- Spring Cloud简单入门教程
原文地址:http://www.cnblogs.com/skyblog/p/5127690.html 按照官方的话说:Spring Cloud 为开发者提供了在分布式系统(如配置管理.服务发现.断路器 ...
- RPC框架-yar学习
RPC采用客户机/服务器模式. 请求程序就是一个客户机,而服务提供程序就是一个服务器.首先,客户机调用进程发送一个有进程参数的调用信息到服务进程,然后等待应答信息.在服务器端, 进程保持睡眠状态直到调 ...
- Android N(7.0) 在ListView里显示EditText时软键盘弹出时会自动切换到全键盘的问题?
Android N(7.0) 在ListView里显示EditText时软键盘弹出时会自动切换到全键盘的问题? 问题症状描述 Activity 在AndroidManifest.xml里设置andro ...
- 影子寄存器(shadow register)
1.以下仅供参考:有阴影的寄存器,表示在物理上这个寄存器对应2个寄存器,一个是程序员可以写入或读出的寄存器,称为preload register(预装载寄存器),另一个是程序员看不见的.但在操作中真正 ...
- Angularjs学习笔记8_directive2
指令难点在于参数 angular.module('app', []) .directive('myDirective', function() { return { restrict: String, ...
- 2017-5-14 湘潭市赛 Highway 先获得直径S,T。则一开始S,T相连,然后其他的点如果离S更远那么连在S,否则T;
Highway Accepted : Submit : Time Limit : MS Memory Limit : KB Highway In ICPCCamp there were n towns ...
- 【Python + ATX基于uiaotumator2】之Android—APP自动化简易例子
上代码: import uiautomator2 as u2 from time import sleep d = u2.connect_usb('608ad0fe') #打开小卖 # d(text= ...
- python django -2 ORM模型
ORM简介 MVC框架中包括一个重要的部分,就是ORM,它实现了数据模型与数据库的解耦,即数据模型的设计不需要依赖于特定的数据库,通过简单的配置就可以轻松更换数据库 ORM是“对象-关系-映射”的简称 ...
- CentOS 6.5 Git源码安装
首先清除系统自带git,使用如下命令 yum -y remove git 一.下载Git源码包 wget https://www.kernel.org/pub/software/scm/git/git ...