博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
file上传图片获取路径地址
阅读量:5086 次
发布时间:2019-06-13

本文共 688 字,大约阅读时间需要 2 分钟。

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

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

 

转载于:https://www.cnblogs.com/leshao/p/5194593.html

你可能感兴趣的文章
Animations介绍及实例
查看>>
判断请求是否为ajax请求
查看>>
【POJ2699】The Maximum Number of Strong Kings(网络流)
查看>>
spring boot配置跨域
查看>>
BZOJ 1996 合唱队(DP)
查看>>
进击吧!阶乘——大数乘法
查看>>
安卓学习资料推荐-25
查看>>
Mysql数据库备份和还原常用的命令
查看>>
关于退出当前页面在火狐的一些问题
查看>>
【项目实施】项目考核标准
查看>>
spring-aop AnnotationAwareAspectJAutoProxyCreator类
查看>>
经典入门_排序
查看>>
Redis Cluster高可用集群在线迁移操作记录【转】
查看>>
二、spring中装配bean
查看>>
VIM工具
查看>>
javascript闭包
查看>>
@Column标记持久化详细说明
查看>>
创建本地yum软件源,为本地Package安装Cloudera Manager、Cloudera Hadoop及Impala做准备...
查看>>
mysql8.0.13下载与安装图文教程
查看>>
站立会议08(冲刺2)
查看>>