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. Git (2)

    要使用Git首先遇到的问题是怎么把文件加到库中. 很简单. 新建一个目录,然后git init. 完成上述工作之后的唯一改动是在当前目录下生成了一个.git的子目录.这个子目录是一个集中的数据库,包含 ...

  2. PHP开发APP接口---返回数据的封装类

    参考视频http://www.imooc.com/learn/163 <?php /** * app返回数据类 * 1.接受多维,缺少键名的数组, * 2.可由输入的format参数决定返回数据 ...

  3. Linux下安装MySQLdb

    在Linux下使用Python访问MySQL的方法之一是使用MySQLdb module,下面将介绍在Linux下如何安装MySQLdb的过程. (1)下载MySQLdb 从SourceForge.n ...

  4. (bug更正)利用KVC和associative特性在NSObject中存储键值

    KVC 一直没仔细看过KVC的用法,想当然的认为可以在NSObject对象中存入任意键值对,结果使用时碰到问题了. 一个简单的位移动画: CAKeyframeAnimation *keyPosi=[C ...

  5. SqlServer 允许保存对数据库中表结构的修改

    1.Tools-->optisons-->Designers 如下截图

  6. LightOj_1284 Lights inside 3D Grid

    题目链接 题意: 给一个X * Y * Z 的立方体, 每个单位立方体内都有一盏灯, 初始状态是灭的, 你每次操作如下: 1)选择一个点(x1, y1, z1)     再选择一个点(x2, y2, ...

  7. [BZOJ 3198] [Sdoi2013] spring 【容斥 + Hash】

    题目链接:BZOJ - 3198 题目分析 题目要求求出有多少对泉有恰好 k 个值相等. 我们用容斥来做. 枚举 2^6 种状态,某一位是 1 表示这一位相同,那么假设 1 的个数为 x . 答案就是 ...

  8. 百部BBC经典纪录片,附地址,需要的请抱走

  9. Servo: The Embeddable Browser Engine

    Embedding, in the context of this article, is the process of hosting a web rendering engine inside a ...

  10. Asm.js: Javascript的编译目标

    正如许多开发者一样,我也为Asm.js的前景而感到兴奋不已.最近的新闻——Asm.js正 在被Firefox支持——引起了我的兴趣.同样感兴趣的还有Mozilla和Epic声明(mirror)他们已经 ...