<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 自定义上传图片样式,并回显的更多相关文章

  1. ueditor1.4.3jsp版成功上传图片后却回显不出来与在线管理显示不出图片的解决方案

    这是因为路径问题,可以在jsp/config.json这个文件去改路径 通过“imageUrlPrefix”与“imagePathFormat”这两个属性去拼凑路径. “imageUrlPrefix” ...

  2. 淘淘商城学习笔记 之 上传图片到远程服务器,图片的回显出现的bug

    最近在学习淘淘商城中用到的技术,感觉受益良多,遇到一个比较奇怪的bug调了好久,遂心乐之分享于诸君 bug情况是这样的:在商城的后台上传图片之后图片回显不出来,右键查看链接,发现链接被加了localh ...

  3. JSP第四篇【EL表达式介绍、获取各类数据、11个内置对象、执行运算、回显数据、自定义函数、fn方法库】

    什么是EL表达式? 表达式语言(Expression Language,EL),EL表达式是用"${}"括起来的脚本,用来更方便的读取对象! EL表达式主要用来读取数据,进行内容的 ...

  4. 使用Dropzone上传图片及回显演示样例

    一.图片上传所涉及到的问题 1.HTML页面中引入这么一段代码 <div class="row"> <div class="col-md-12" ...

  5. Kindeditor上传图片回显不出来

    原因之一: 图片成功上传但是回显不出来,这个时候,要检查返回的图片地址是否加了http://这个玩意,不然会将原来的头加上图片返回地址.

  6. layui 上传图片回显并点击放大实现

    1.页面代码布局 <div class="layui-col-xs12 form-group"> <div class="layui-col-xs6&q ...

  7. WebUploader 上传图片回显

    /* fileMaxCount 最大文件数 buttonText 按钮文本 multiple 是否多选 */ (function ($) { $.fn.extend({ uploadImg: func ...

  8. SpringMVC框架下数据的增删改查,数据类型转换,数据格式化,数据校验,错误输入的消息回显

    在eclipse中javaEE环境下: 这儿并没有连接数据库,而是将数据存放在map集合中: 将各种架包导入lib下... web.xml文件配置为 <?xml version="1. ...

  9. 图片上传并回显Ajax异步篇

    图片上传并回显Ajax异步篇 图片如何无刷新的上传到服务器呢?继前两篇文章后,我们来实战一下如何无刷新的异步上传图片,我们还是先看一下效果 在实战前呢,我们需要做些准备工作.比如说,了解一下FormD ...

随机推荐

  1. xmind 8 便携版:关联文件后,双击打开文件,在当前文件夹产生configuration子文件的问题解决办法

    Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\.xmind] @="XMind.Workbook.3" " ...

  2. 纵观 jBPM:从 jBPM3 到 jBPM5 以及 Activiti5

    https://www.infoq.cn/article/rh-jbpm5-activiti5# 对jBPM来说,今年最大的事件莫过于 jBPM 的创建者Tom Baeyens离开 JBoss 了.T ...

  3. [转][SqlServer]收缩日志

    USE StudyDB ; GO ALTER DATABASE StudyDB SET RECOVERY SIMPLE;--设置简单恢复模式 GO ); GO ALTER DATABASE Study ...

  4. web页面性能

    一.资源压缩合并,减少HTTP请求 二.非核心代码异步加载 1.异步加载的方式 动态脚本加载 defer async 2.异步加载的区别 (1)defer是在HTML解析完之后才会执行,如果是多个,按 ...

  5. Excel 2016 密码保护破解

    Excel 2016的密码保护可以区分为几个: 文件密码保护(Excel中叫做工作簿保护) 文件打开权限密码 文件修改权限密码 工作表保护 关于各个保护密码的设置方式请查阅其他资料,我的情况是之前自己 ...

  6. Intellij IDEA超好用的快捷键

    1.首推 Ctrl+Shift+Enter,自动跳出括号,在行尾添加分号,并自动回车. 2.Ctrl+Shift+J,将多行代码折叠成一行. 当你遇到的时候,这个快捷键非常实用.比如你在写painle ...

  7. 打包时,node内存溢出问题解决方法

    在使用npm run build打包时,遇到node内存溢出问题. 网上查找到的决绝方案.解决方案一: 安装increase-memory-limit插件,扩大node的内存限制 但是,这个解决方案在 ...

  8. 提取和匹配线特征的一个demo

    一.代码来源: https://github.com/drozdvadym/opencv_line_descriptor 二.依赖包:OpenCV 2.4.9 三.Matching的运行结果截图: 四 ...

  9. eShopOnContainers 看微服务④:Catalog Service

    服务简介 Catalog service(目录服务)维护着所有产品信息,包括库存.价格.所以该微服务的核心业务为: 产品信息的维护 库存的更新 价格的维护 架构模式 先看代码结构(下图). 主要依赖: ...

  10. rsync:基本命令和用法

    以下是rsync系列篇: 1.rsync(一):基本命令和用法 2.rsync(二):inotify+rsync详细说明和sersync 3.rsync算法原理和工作流程分析 4.rsync技术报告( ...