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 ...
随机推荐
- 理解Php中的Static
① 使用 static 可以将类中的成员标识为静态的,既可以用来标识成员属性,也可以用来标识成员方法,比如: <?php class China { public static $boy = 1 ...
- 微信JS-SDK签名signature错误代码4029
一般是url的错,url需要动态获取 c#的写法: //Request.Url.ToString()这个获取的是没有端口号的有些网站有端口号 string url = Request.Url.Orig ...
- Multilingual App Toolkit v2.2 release
Multilingual App Toolkit v2.2 release Today we released Multilingual App Toolkit v2.2. This release ...
- Laravel之路——缓存使用
1.使用Redis类 use Illuminate\Support\Facades\Redis; //设置指定 key 的值(覆盖老的value) Redis::setex('key','value' ...
- SendMail
public ActionResult SendMail() { MailMessage mss = new MailMessage(); mss.From = new MailAddress(&qu ...
- 利用R进行多元线性回归分析
对于一个因变量y,n个自变量x1,...,xn,要如何判断y与这n个自变量之间是否存在线性关系呢? 肯定是要利用他们的数据集,假设数据集中有m个样本,那么,每个样本都分别对应着一个因变量和一个n维的自 ...
- bzoj 1004 1004: [HNOI2008]Cards burnside定理
1004: [HNOI2008]Cards Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 1668 Solved: 978[Submit][Stat ...
- 【BZOJ2434-[Noi2011]】阿狸的打字机(AC自动机(fail树)+离线+树状数组)
Description 阿狸喜欢收藏各种稀奇古怪的东西,最近他淘到一台老式的打字机.打字机上只有28个按键,分别印有26个小写英文字母和'B'.'P'两个字母. 经阿狸研究发现,这个打字机是这样工作的 ...
- 修改Delphi工具控件的默认字体
修改Delphi工具控件的默认字体: 注册表: Delphi 6: HKEY_CURRENT_USER\Software\Borland\Delphi\6.0Delphi 7: HKEY_ ...
- 14.5.5.3 How to Minimize and Handle Deadlocks 如何减少和处理死锁
14.5.5.3 How to Minimize and Handle Deadlocks 如何减少和处理死锁 这个部分建立在概念信息关于deadlocks 在章节 14.5.5.2, "D ...