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 内存不足
今天编写数据库备份类时,在运行的过程中,出现了内存不足的问题,提示:Fatal error: Allowed memory size of 25165824 bytes exhausted (trie ...
- 纯手工打造dropdownlist控件
先上图吧,看看效果. JS代码: ; (function ($) { var DropdownList = function (oDataSouce, oControlsContainer, oLis ...
- Balsamiq Mockups
Balsamiq Mockups完全手册 2010.03.18 发布 48,066 浏览 什么是Balsamiq Mockups Balsamiq Mockups出自加利福尼亚州的Balsamiq工作 ...
- ASP.Net Web 点击链接直接下载 不在浏览器打开
目标是:用户点击链接直接弹出下载框,不在浏览器打开文件. 一般网站下载的功能,本以为直接把虚拟路径赋值给链接就行了,没想到测试的时候发现图片,文本和PDF格式的文件都自动在Firefox里面打开了,没 ...
- 项目管理Point
1.项目管理流程 在设计阶段需要提交的成果物:类图设计(每个方法要有成形的SQL),页面设计,数据库设计,思路:需求分析->用户故事->客户确认(前三步是个迭代过程)->类图设计(了 ...
- Zoj 3865 Superbot
按规则移动机器人 , 问是否能拾得宝藏 . 加了一个控制板 , 还增加了一个控制板移动周期 p 将移动周期变换一下 , 移动一次 就相当于光标向左不耗费时间的移动了一格 搜索思路 : 搜索当前格子到 ...
- oracle excute immediate 单引号转义
excute immedaite 后接单引号,但是遇到 add xxx default ' ' ,命令中还有单引号的情况,需要转义.这时候不是用传统的 \ 反斜杠来转义,而是用 单引号转义 execu ...
- 解决Tomcat无法加载css和js等静态资源文件
解决思路有两个 一是,你使用了Apache服务器,html不交给Tomcat处理,所以你找不到Html等静态资源,所以你先停掉阿帕奇,然后只用Tomcat猫试试. 二是,像我一样,使用了Jetty开发 ...
- 查看SQL Server数据库中各个表和视图的索引所占的空间大小
;with cte as ( (select t.name as TableName,i.name as IndexName, sum(row_count)as row_count, SUM (s.u ...
- Quartz 有状态的JobDataMap
Quartz,每次执行job,job永远是全新的对象,但是,如果job实现org.quartz.StatefulJob接口,而不是job接口. 此时JobDetail的JobDataMap将会共享一个 ...