input标签上传图片怎么获取src;
- 大家都知道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;的更多相关文章
- 关于获取input标签属性的获取以及更改,此处用到的是readonly属性
一开始,我使用的是Jquery框架中的$.("#input").readOnly,发现取出的值为undefined,不知道是不是jQuery中不支持获取标签属性的函数, 然后就使用 ...
- H5 使用input标签上传图片给后台
html代码: <div class="hpk-showimg"> <!-- 营业执照 --> <div class="idcardup&q ...
- jQuery通过input标签的name获取值
jquery根据name属性查找 $("div[id]") 选择所有含有id属性的div元素 $("input[name='keleyicom']") 选择所有 ...
- 为什么JS动态生成的input标签在后台有时候没法获取到
最近在做一个产品添加的功能,需求有点奇葩,所以在添加的时候免不了要用到动态生成控件,然后我就使用了JS去动态生成一些 checkbox类型的input标签,在以前用asp.net在后台生成的input ...
- 有趣的js获取input标签中光标的索引
先看动图如下,我们就可以很清楚的知道获取input标签中光标的索引的意思了. 由于IE支持document.selection,Firefox,Chrome,Safari以及Opera都有select ...
- juqery 点击谁获取他的值,赋给input标签
//html代码 <a href="javascript:;" class="confirm fahuo" data-fahuo-id="{$v ...
- input/radio/select等标签的值获取和赋值
input/radio/select等标签的值获取和赋值,这几个是使用率最高的几个标签,获取值和赋值以及初始化自动填充数据和选择: 页面html: <div class=" " ...
- angularjs <input>标签获取时间显示问题
一般的后台管理中,几乎每个管理后台都有设置新密码的功能,但是获取的时候为了好看,都有统一用一定的标签,比如input标签,ng-model来控制显示数据,但是在获取时间的时候用会显示错乱 代码为: & ...
- 如何获取Input标签自定义属性的值?
HTML代码: <input type="hidden" value="${Name?if_exists}" id='ID' busCode = &quo ...
随机推荐
- android入门到熟练(二)----活动
1.活动创建对于每一个后端java类(继承至Activity或者ActionBarActivity)代码都有一个方法需要被重写[onCreate], 在此方法中可以加载界面资源文件或者绑定元素事件. ...
- CI源码引用使用--php引用demo,静态变量和引用关系
CI源码引用使用在Common.php中,加载配置和类的方法 function &test() { static $a = ''; if (!$a) { $a ...
- html5时间选择器
HTML5日期输入类型(date) 分享 分享 分享 分享 分享 在很多页面和web应用中都有输入日期和时间的地方,最典型的是订飞机票,火车票,酒店,批萨等网站. 在HTML5之前 ...
- linux下VI编辑器的使用
一.VI编辑器简述 VI 编辑器是Linux和Unix上最基本的文本编辑器,工作在字符模式下.由于不需要图形界面,使它成了效率很高的文本编辑器.尽管在Linux上也有很多图形界面的编辑器可 ...
- C语言中”#x“的含义
#x 的含义是给x添加“”,也就是说将字符常量.常量转换为字符串常量
- PAT (Basic Level) 1001害死人不偿命的(3n+1)猜想 (15)
卡拉兹(Callatz)猜想: 对任何一个自然数n,如果它是偶数,那么把它砍掉一半:如果它是奇数,那么把(3n+1)砍掉一半.这样一直反复砍下去,最后一定在某一步得到n=1.卡拉兹在1950年的世界数 ...
- C#使用字符串分割字符串
我们都会用字符分割字符串: string[] recvArr = recv.Split(';'); 如果用字符串分割呢?下面: string[] sArray = Regex.Split(recv, ...
- bzoj 1503: [NOI2004]郁闷的出纳员 Treap
1503: [NOI2004]郁闷的出纳员 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 6263 Solved: 2190[Submit][Statu ...
- bzoj 1002 [FJOI2007]轮状病毒 高精度&&找规律&&基尔霍夫矩阵
1002: [FJOI2007]轮状病毒 Time Limit: 1 Sec Memory Limit: 162 MBSubmit: 2234 Solved: 1227[Submit][Statu ...
- 框架中的HTML DOM Event 对象
js中的this上下文会因事件而转换成html dom对象. 所以就有这样获取当前触发事件的dom对象: window.event.srcElement || window.event.target; ...