1. 大家都知道input标签可以上传文件

    如:
<input type="file"/>

就可以上传文件,当然也可以上传图片,上传的图片的src地址如何取到:

 var reader = new FileReader();
reader.onload = function(e){
console.log(e.target.result)
}
reader.readAsDataURL(file.files[0]);

e.target.result就是src;其实这个方法就是把你上传的图片转化成base64进行在网络上流通,在控制台可看出

附一个例子:

<div class="demo"><img width="200px">
<input type="file" onchance="demo(this)"/>
</div>
 function demo(file)
{
if (file.files && file.files[0])
{
var reader = new FileReader();
reader.onload = function(evt){
jQuery(".demo img").attr("src",evt.target.result)
console.log(evt.target.result)
}
reader.readAsDataURL(file.files[0]);
}
else
{
jQuery(".demo img").attr("src",evt.target.result)
}
}

如果想要美观也可做个模态框。如果想要更多功能可以用插件fileupload自行百度谷歌。

input标签上传图片怎么获取src;的更多相关文章

  1. 关于获取input标签属性的获取以及更改,此处用到的是readonly属性

    一开始,我使用的是Jquery框架中的$.("#input").readOnly,发现取出的值为undefined,不知道是不是jQuery中不支持获取标签属性的函数, 然后就使用 ...

  2. H5 使用input标签上传图片给后台

    html代码: <div class="hpk-showimg"> <!-- 营业执照 --> <div class="idcardup&q ...

  3. jQuery通过input标签的name获取值

    jquery根据name属性查找 $("div[id]") 选择所有含有id属性的div元素 $("input[name='keleyicom']") 选择所有 ...

  4. 为什么JS动态生成的input标签在后台有时候没法获取到

    最近在做一个产品添加的功能,需求有点奇葩,所以在添加的时候免不了要用到动态生成控件,然后我就使用了JS去动态生成一些 checkbox类型的input标签,在以前用asp.net在后台生成的input ...

  5. 有趣的js获取input标签中光标的索引

    先看动图如下,我们就可以很清楚的知道获取input标签中光标的索引的意思了. 由于IE支持document.selection,Firefox,Chrome,Safari以及Opera都有select ...

  6. juqery 点击谁获取他的值,赋给input标签

    //html代码 <a href="javascript:;" class="confirm fahuo" data-fahuo-id="{$v ...

  7. input/radio/select等标签的值获取和赋值

    input/radio/select等标签的值获取和赋值,这几个是使用率最高的几个标签,获取值和赋值以及初始化自动填充数据和选择: 页面html: <div class=" " ...

  8. angularjs <input>标签获取时间显示问题

    一般的后台管理中,几乎每个管理后台都有设置新密码的功能,但是获取的时候为了好看,都有统一用一定的标签,比如input标签,ng-model来控制显示数据,但是在获取时间的时候用会显示错乱 代码为: & ...

  9. 如何获取Input标签自定义属性的值?

    HTML代码: <input type="hidden" value="${Name?if_exists}" id='ID' busCode = &quo ...

随机推荐

  1. ubuntu 14.04安装amd omega 驱动

    驱动共分4部分: fglrx_14.501-0ubuntu1_amd64_UB_14.01.deb      52.0MB fglrx-core_14.501-0ubuntu1_amd64_UB_14 ...

  2. Javascript线程及定时机制

    setTimeout.setInterval的使用 Javascript api文档中定义setTimeout和setInterval第二个参数意义分别为间隔多少毫秒后回调函数被执行和每隔多少毫秒回调 ...

  3. linux用户管理,linux用户口令管理,linux用户组管理,linux用户权限管理详解

    linux用户管理 http://www.qq210.com/shoutu/android 用户账号的添加(新加用户需添加用户口令) :增加用户账号就是在/etc/passwd文件中为新用户增加一条记 ...

  4. Apache .htaccess Rewrite解决问号匹配的写法

    如news.asp?id=123 需要把它定向到 news/123.html 这个用 RewriteRule 怎么写啊? RewriteRule ^news\.asp\?id=(\d+)$ news/ ...

  5. debug(fmt,args...)调试

    1.定义宏(debug.h) #ifndef __DEBUG__H #define __DEBUG__H #include <stdio.h> #ifdef DEBUG #define d ...

  6. Swift 类和结构体的简单认识

    类和结构体的共同点: 定义属性用于存储值 定义方法用于提供功能 定义附属脚本用于访问值 通过拓展增加默认实现的功能 定义构造器用于生成初始化值 实现协议以提供某种标准功能 类是引用类型 结构体是值类型 ...

  7. 字符串搜索算法Boyer-Moore

    整理日: 2015年2月16日 1. 主要特征 假设文本串text长度为n,模式串pattern长度为m,BM算法的主要特征为: 从右往左进行比较匹配(一般的字符串搜索算法如KMP都是从从左往右进行匹 ...

  8. Hive的Metastore contains multiple versions

    hive 客户端报错:Exception in thread "main" java.lang.RuntimeException: java.lang.RuntimeExcepti ...

  9. 不用找了,比较全的signalR例子已经为你准备好了.

    这几天想着将一个winform的工具上线到web上,因为对时时性的要求比较高,找朋友咨询了一下推荐了SignlarR 框架,比较强大.昨天才看到,今天研究了一下将里面的例子都拿出来共享. 最全的参考: ...

  10. bzoj 1041: [HAOI2008]圆上的整点 本原勾股數組

    1041: [HAOI2008]圆上的整点 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 2027  Solved: 853[Submit][Stat ...