file上传图片获取路径地址

类似:点击button,选择图片,在对应的输入框input里面显示图片路径地址

类似这样

原理:通过opacity来隐藏原生的input file 然后用.file-btn来模拟input file的位置 再进行美化

file-btn 设置overflow: hidden;是为了不让超出的部分也能点击添加file

==============核心jq代码================================

$(function(){
    $(".input-file").each(function(i){
    $(".input-file").eq(i).bind('change',function(){
    $(".input-txt").eq(i).val($(this).val());
    });
    })
 })

====================================================

参考面包源码地址:http://files.cnblogs.com/files/leshao/codepen_vLeoJm.rar

修改之后列表代码:http://files.cnblogs.com/files/leshao/file%E5%88%97%E8%A1%A8%E4%B8%8A%E4%BC%A0%E5%9B%BE%E7%89%87%E8%B7%AF%E5%BE%84.rar

多谢 江华  面包 ,完善,哈哈

file上传图片获取路径地址的更多相关文章

  1. wordpress各种获取路径和URl地址的函数总结

    wordpress中的路径也不是很负责,有人为了让wordpress运行速度更快,就直接写了绝对地址,其实这样是很不好的,有可能别人修改了wordpress程序的地址,那么这样你编写的这个插件或者是主 ...

  2. JAVA中获取路径

    内容来自于snannan_268 关键字: java中获取路径 JAVA中获取路径: 1.jsp中取得路径:   以工程名为TEST为例: (1)得到包含工程名的当前页面全路径:request.get ...

  3. JavaEE 获取路径全攻略

    本篇博客是 JavaWeb 应用服务器端在不同环境下获取文件路径的全面总结. 获取文件路径后主要应用的场景,读取 JavaWeb 自定义配置文件.在特定路径下生成各种类型的文件提供下载...... 想 ...

  4. Java获取路径方法&相对路径读取xml文件方法

    (1).request.getRealPath("/");//不推荐使用获取工程的根路径 (2).request.getRealPath(request.getRequestURI ...

  5. JAVA文件中获取路径及WEB应用程序获取路径方法

    JAVA文件中获取路径及WEB应用程序获取路径方法 1. 基本概念的理解 `绝对路径`:你应用上的文件或目录在硬盘上真正的路径,如:URL.物理路径 例如: c:/xyz/test.txt代表了tes ...

  6. File中操作路径的API(转)

    这几天一直在搞Java,模板引擎系列和程序猿执业修养系列都暂停了,在Java上忙的不亦乐乎!由于对Java还不太熟悉,经历了各种纠结终于完成了任务.以下是关于Java获取当前目录的方法的备忘录. 原文 ...

  7. GetPathFromUri4kitkat【Android 4.4 kitkat以上及以下根据uri获取路径的方法】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 在Android4.4之前和之后,通过Intent调用文件管理器选择文件,获取的文件uri地址形式是不同的. Android6.0 ...

  8. java 获取路径的各种方法

    (1).request.getRealPath("/");//不推荐使用获取工程的根路径 (2).request.getRealPath(request.getRequestURI ...

  9. Java 获取路径的几种方法 - 转载

    1.获取当前类所在的“项目名路径” String rootPath = System.getProperty("user.dir"); 2.获取编译文件“jar包路径”(反射) S ...

随机推荐

  1. json数据导出excel

    最近做的一个项目涉及到把数据导出到excel里面,网上找来找去,最终找到两种办法,废话不多说了 第一种: 拿到表格的id就可以抓取表格的数据,导出到excel,这种方式简单粗暴,引入这两个插件即可. ...

  2. Winform开发中如何将数据库字段绑定到ComboBox控件

    最近开始自己动手写一个财务分析软件,由于自己也是刚学.Net不久,所以自己写的的时候遇到了很多问题,希望通过博客把一些印象深刻的问题记录下来. Winform开发中如何将数据库字段绑定到ComboBo ...

  3. jumpserver 堡垒机环境搭建(图文具体解释)

    Jumpserver 是一款由python编写开源的跳板机(堡垒机)系统,实现了跳板机应有的功能.基于ssh协议来管理,客户端无需安装agent. 特点: 全然开源,GPL授权 Python编写.容易 ...

  4. 【Java集合源代码剖析】LinkedHashmap源代码剖析

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/37867985 前言:有网友建议分析下LinkedHashMap的源代码.于是花了一晚上时间 ...

  5. Mongodb 3.4 + Centos6.5 配置 + mysql.sql转为csv 或 json导入和导出Mongo (64位系统)

    Centos下通过yum安装步骤如下: 声明:相对比那些用源码安装,少了配置和新建log和data目录,这种简单粗暴, ,创建仓库文件, vi /etc/yum.repos.d/mongodb-org ...

  6. 浅谈MySQL中的查询优化

    mysql的性能优化包罗甚广: 索引优化,查询优化,查询缓存,服务器设置优化,操作系统和硬件优化,应用层面优化(web服务器,缓存)等等.这里的记录的优化技巧更适用于开发人员,都是从网络上收集和自己整 ...

  7. angular自定义分页组件(实用)

    功能描述:分页,点击按钮或者下一页获取分页接口,同时active到对应页码. html模块: <page page-count="totalPage" on-click-pa ...

  8. java 单例模式学习笔记

    1.单例模式概述 单例模式就是确保类在内存中只有一个对象,该实例必须自动创建,并且对外提供. 2.优缺点 优点:在系统内存中只存在一个对象,因此可以节约系统资源,对于一些需要频繁创建和销毁的对象单例模 ...

  9. intellij idea 主题大全,看不惯idea 那2种主题的来这里了

    一直用默认的主题,但是白色的背景看久了会晃眼睛.所以打算换成黑色的. 不过Intellij只有两种主题,Default和Darcula. 现在只能自己手动安装一个了.新主题需要满足, 看久了不会太累. ...

  10. 基于百度AI实现 车牌识别

    前言 目前百度的AI接口相对完善,对于文字识别类的操作还需要开发者一一去尝试,去评估这效果到底是怎么的. 文字识别的接口相对简单,官方提供的SDK也集成很好,笔者只是在这上面做了一些前期性的功能数据校 ...