html 自定义上传图片样式,并回显
<div id="photoUpLoad">
<input type="file" id="photo" name="" accept="image/*"><span class="cross">+</span>
<img src="" alt="" id="photoEcho">
</div>
#photoUpLoad{
width: 106px;
height: 129px;
position: relative;
cursor: pointer;
border-radius: 2px;
border: solid 1px #d0daea;
}
#photo{
opacity:;
z-index:;
width: 100%;
height: 100%;
position: absolute;
top:;
left:;
}
#photoEcho{
z-index:;
width: 100%;
height: 100%;
position: absolute;
top:;
left:;
}
#photoUpLoad .cross{
color: #d0daea;
font-size: 44px;
line-height: 44px;
position: absolute;
top: 38px;
right: 36px;
}
$("#photo").change(function(){
var file = this.files[0];
console.log(file);
if(!file){
return false;
}
var maxSize = 1024 ; //图片最大KB
if(!/(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(file.type)){
top.alertLocal("请上传gif,jpeg,jpg,png格式的图片!");
return;
}
if(file.size > maxSize* 1024){
top.alertLocal("请上传"+maxSize+"KB以下的图片");
return;
}
var objUrl = getObjectURL(file) ;
if (objUrl) {
$("#photoEcho").attr("src", objUrl) ;
}
}) ;
//建立一個可存取到該file的url
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 ;
}
html 自定义上传图片样式,并回显的更多相关文章
- ueditor1.4.3jsp版成功上传图片后却回显不出来与在线管理显示不出图片的解决方案
这是因为路径问题,可以在jsp/config.json这个文件去改路径 通过“imageUrlPrefix”与“imagePathFormat”这两个属性去拼凑路径. “imageUrlPrefix” ...
- 淘淘商城学习笔记 之 上传图片到远程服务器,图片的回显出现的bug
最近在学习淘淘商城中用到的技术,感觉受益良多,遇到一个比较奇怪的bug调了好久,遂心乐之分享于诸君 bug情况是这样的:在商城的后台上传图片之后图片回显不出来,右键查看链接,发现链接被加了localh ...
- JSP第四篇【EL表达式介绍、获取各类数据、11个内置对象、执行运算、回显数据、自定义函数、fn方法库】
什么是EL表达式? 表达式语言(Expression Language,EL),EL表达式是用"${}"括起来的脚本,用来更方便的读取对象! EL表达式主要用来读取数据,进行内容的 ...
- 使用Dropzone上传图片及回显演示样例
一.图片上传所涉及到的问题 1.HTML页面中引入这么一段代码 <div class="row"> <div class="col-md-12" ...
- Kindeditor上传图片回显不出来
原因之一: 图片成功上传但是回显不出来,这个时候,要检查返回的图片地址是否加了http://这个玩意,不然会将原来的头加上图片返回地址.
- layui 上传图片回显并点击放大实现
1.页面代码布局 <div class="layui-col-xs12 form-group"> <div class="layui-col-xs6&q ...
- WebUploader 上传图片回显
/* fileMaxCount 最大文件数 buttonText 按钮文本 multiple 是否多选 */ (function ($) { $.fn.extend({ uploadImg: func ...
- SpringMVC框架下数据的增删改查,数据类型转换,数据格式化,数据校验,错误输入的消息回显
在eclipse中javaEE环境下: 这儿并没有连接数据库,而是将数据存放在map集合中: 将各种架包导入lib下... web.xml文件配置为 <?xml version="1. ...
- 图片上传并回显Ajax异步篇
图片上传并回显Ajax异步篇 图片如何无刷新的上传到服务器呢?继前两篇文章后,我们来实战一下如何无刷新的异步上传图片,我们还是先看一下效果 在实战前呢,我们需要做些准备工作.比如说,了解一下FormD ...
随机推荐
- JavaScript易混淆的零碎知识点积累
1.callee属性 和 caller属性. 区别:两者的调用对象不同 arguments.callee:指向拥有这个arguments对象的函数,在递归运算中经常用到. functionName.c ...
- 由consequence忽然发现英语也挺有意思
con- 是拉丁语前缀, 有 with, together 的意思. con- 和 com- 一样的. 只是因为 在 b p m 前发 m 音更方便, 所以这些音前的 con- 变为 com- (例 ...
- Spring事件通知机制
在上图中,调用 getApplicationEventMulticaster()方法,该方法返回的ApplicationEventMulticaster类型的对象applicationEventMul ...
- Unity 缓冲池概念
在Unity 中碰到一些重复使用的游戏物体时,我们可以使用缓冲池来进行操作,即重复利用
- Unity Input,生命周期,Light,获取组件
1. 递归方法遍历获取指定子物体 知识点:递归的使用:transform.childCount.GetChild(index) 2. Input输入控制类,检测玩家输入 知识点: Input ...
- Apache的ServerAlias的作用
今天在php的集成环境laragon上添加了一个虚拟主机,域名为:whathell.com 突然想在前面加个www. 一种做法是在auto.whathell.com文件中添加如下内容: <Vir ...
- MVC动态赋值的td选中,获取当前的td的ID或者值
前台绑定数据: <div class="mailbox-content"> <table class="table"> <tbod ...
- javascript websocket 心跳检测机制介绍
====测试代码: ==index.html <!DOCTYPE html> <html lang="en"> <head> <meta ...
- uva_answers
uva202: https://blog.csdn.net/lecholin/article/details/70163148 uva1589: https://blog.csdn.net/qq_42 ...
- pinyin.js
export default { a: "\u554a\u963f\u9515", ai: "\u57c3\u6328\u54ce\u5509\u54c0\u7691\u ...