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. Linux send和recv

    1.send 函数 int send( SOCKET s, const char FAR *buf, int len, int flags ); 不论是客户还是服务器应用程序都用send函数来向TCP ...

  2. Django使用遇到的各种问题及解决方法

    从Django的 搭建开始,遇到的问题就不断,网站还没有发布,就出错了,我查了好多资料,啃得了不少东西,也没有找到合适的方法,终于没办法了,自己硬着头皮往下读,终于解决了这些问题,下面分享给大家. 代 ...

  3. 数据模型与查询语言 ------《Designing Data-Intensive Applications》读书笔记2

    数据模型是开发软件的最重要的部分,因为它们对应用程序有着深远的影响:不仅是软件的编写方式,而且也影响我们如何解决的问题的方式.第二篇读书笔记,我们聊一聊数据模型的设计. 1.数据模型的分层 作为一个开 ...

  4. log4j2 项目日志组件

    在项目运行过程中,常常需要进行功能调试以及用户行为的跟踪和记录,部分人习惯使用System.out,但这并不建议,它仅仅是使用方便但不便于维护也无扩展性.相比log4j的话,log4j可以控制日志信息 ...

  5. poj 2570 Fiber Network(floyd)

    #include<stdio.h> #include<string.h> #include<algorithm> using namespace std; int ...

  6. Vue深度学习(5)-过渡效果

    简介 通过 Vue.js 的过渡系统,你可以轻松的为 DOM 节点被插入/移除的过程添加过渡动画效果.Vue 将会在适当的时机添加/移除 CSS 类名来触发 CSS3 过渡/动画效果,你也可以提供相应 ...

  7. 解决model 里 NSInteger类型

    #import "CJGWCListModel.h" @implementation CJGWCListModel - (NSInteger)goods_number{ if (_ ...

  8. 【java】多线程同步生产者消费者问题

    package 多线程; class Producer implements Runnable{ private Data data; public Producer(Data data){ this ...

  9. 【java】io流之字节流转为字符流:java.io.OutputStreamWriter和java.io.InputStreamReader

    package 文件操作; import java.io.File; import java.io.FileOutputStream; import java.io.IOException; impo ...

  10. spring mvc报错,数据库查询无限死循环

    进行查询的陷入了无限死循环,原因是问题类中包含了回答,回答类中包含了问题,进入了无限死循环 解决方法:在回答类中的问题类属性上加注解:@JsonBackReference 问题中有回答的set集合,回 ...