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 ...
随机推荐
- linux远程windows桌面
rdesktop,例子如下,-f为全屏,-a为颜色设置 rdesktop -f -a 32 192.168.88.235
- oracle死锁的处理办法
摘自:https://www.cnblogs.com/xuke/p/4053396.html http://blog.itpub.net/30036720/viewspace-2121034/ ora ...
- Windows下安装MySQL8
转自:https://blog.csdn.net/star_in_shy/article/details/82691330 感谢! 一.MySQL官网下载 (一)MySQL下载地址:https:// ...
- docker开启远程访问
作者:zqifa 出处:http://www.cnblogs.com/zqifa/ 默认情况下,Docker守护进程Unix socket(/var/run/docker.sock)来进行本地进程通信 ...
- 远程连接mysql8.0,Error No.2058 Plugin caching_sha2_password could not be loaded
通过本地去连接远程的mysql时报错,原因时mysql8.0的加密方法变了. mysql8.0默认采用caching_sha2_password的加密方式 第三方客户端基本都不支持这种加密方式,只有自 ...
- ESP32 做Web服务器 http Server步骤
资料不多.多是国外网站的. 百度搜基本出来的是这个网站https://www.dfrobot.com/blog-922.html 出来的代码是: #include <WiFi.h>#inc ...
- oracle自治事务(PRAGMA AUTONOMOUS_TRANSACTION)
这段时间遇到一个问题,程序里明明插入了一条记录,但在后边的一段Procedure中却查不到刚刚插入的记录,最后发现这个Procedure的定义中加入了PRAGMA AUTONOMOUS_TRANSAC ...
- udp重发
最近在处理框架通讯方面的问题,通过积累的开发经验,其实在很多情况(尤其是实时大数据量),udp是占有很多优势的:不需要连接,只管发送,理论上要快很多; 另外在穿墙上占有很大优势: 但是最大的一个问题就 ...
- Exception in thread "main" java.lang.UnsupportedClassVersionError
Exception in thread “main" java.lang.UnsupportedClassVersionError这个报错是用高版本JDK编译项目或文件产生的class文件, ...
- Linux安装rar
1.下载RAR 官网下载地址:https://www.rarlab.com/download.htm wget下载:wget http://www.rarsoft.com/rar/rarlinux-x ...