1. <div id="photoUpLoad">
  2. <input type="file" id="photo" name="" accept="image/*"><span class="cross">+</span>
  3. <img src="" alt="" id="photoEcho">
  4. </div>
  1. #photoUpLoad{
  2. width: 106px;
  3. height: 129px;
  4. position: relative;
  5. cursor: pointer;
  6. border-radius: 2px;
  7. border: solid 1px #d0daea;
  8. }
  9. #photo{
  10. opacity:;
  11. z-index:;
  12. width: 100%;
  13. height: 100%;
  14. position: absolute;
  15. top:;
  16. left:;
  17. }
  18. #photoEcho{
  19. z-index:;
  20. width: 100%;
  21. height: 100%;
  22. position: absolute;
  23. top:;
  24. left:;
  25. }
  26.  
  27. #photoUpLoad .cross{
  28. color: #d0daea;
  29. font-size: 44px;
  30. line-height: 44px;
  31. position: absolute;
  32. top: 38px;
  33. right: 36px;
  34. }
  1. $("#photo").change(function(){
  2. var file = this.files[0];
  3. console.log(file);
  4. if(!file){
  5. return false;
  6. }
  7.  
  8. var maxSize = 1024 ; //图片最大KB
  9. if(!/(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(file.type)){
  10. top.alertLocal("请上传gif,jpeg,jpg,png格式的图片!");
  11. return;
  12. }
  13. if(file.size > maxSize* 1024){
  14. top.alertLocal("请上传"+maxSize+"KB以下的图片");
  15. return;
  16. }
  17.  
  18. var objUrl = getObjectURL(file) ;
  19. if (objUrl) {
  20. $("#photoEcho").attr("src", objUrl) ;
  21. }
  22. }) ;
  23. //建立一個可存取到該file的url
  24. function getObjectURL(file) {
  25. var url = null ;
  26. if (window.createObjectURL!=undefined) { // basic
  27. url = window.createObjectURL(file) ;
  28. } else if (window.URL!=undefined) { // mozilla(firefox)
  29. url = window.URL.createObjectURL(file) ;
  30. } else if (window.webkitURL!=undefined) { // webkit or chrome
  31. url = window.webkitURL.createObjectURL(file) ;
  32. }
  33. return url ;
  34. }

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. oracle 删除用户

    -- 查询用户各进程相对应的 sid.serial#. -- 注意: username 必须大写 SELECT sid,serial#,username FROM v$session WHERE us ...

  2. MySQL中InnoDB锁不住表的原因

    MySQL中InnoDB锁不住表是因为如下两个参数的设置: mysql> show variables like '%timeout%'; +-------------------------- ...

  3. Tomcat应用部署

    1.Tomcat安装配置 1.1安装包下载 http://tomcat.apache.org/ 选择下载安装包版本 选择适合当前系统的安装包 安装包目录说明: 1.2环境配置 配置用户名密码conf/ ...

  4. go语言学习--go中godep的使用小结

    go中的godep 本文参考:http://www.cnblogs.com/me115/p/5528463.html#h20 http://studygolang.com/articles/4385 ...

  5. docker-compose hello word

    Compose 是 Docker 容器进行编排的工具, 是一个整合发布docker应用的利器,可定义和运行多容器的应用,在 Compose 中你可以使用 YAML 文件来配置你的应用服务.然后,只需要 ...

  6. WRF安装过程

    WRF安装过程 1.  在虚拟机VMware上安装Fedora 12 x64操作系统. 2. 安装PGI9.01 a)         电驴上可下载[[顶级编译器].PGI.Workstation.C ...

  7. Java进程&线程(一)

    Java进程&线程 程序:程序员写的代码,就是代码,不运行好像不会发生什么: 进程:一个进程可以理解为"运行的"一个程序,当我们启动一个java程序后,对应的jvm就会创建 ...

  8. kettle在centos7下部署分布式集群

    首先安装三台centos7 ,分别配置好静态ip    ssh免密码登录     关闭防火墙 具体步骤这里不多说了 关于centos7配置静态ip大家可以参考:https://www.cnblogs. ...

  9. solr中facet及facet.pivot理解(整合两篇文章保留参考)

    Facet['fæsɪt]很难翻译,只能靠例子来理解了.Solr作者Yonik Seeley也给出更为直接的名字:导航(Guided Navigation).参数化查询(Paramatic Searc ...

  10. Day71Django基础

    Django框架基础一 python中的web框架    a:socket    b:路由跟视图函数匹配关系    c:模板渲染    django:  a: 用了别人的wsgiref   b:自己写 ...