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. 读书笔记之 - javascript 设计模式 - 享元模式

    本章探讨另一种优化模式-享元模式,它最适合于解决因创建大量类似对象而累及性能的问题.这种模式在javascript中尤其有用,因为复杂的javascript代码很快就会用光浏览器的所有可用内存,通过把 ...

  2. 【实习记】2014-08-15文档太少看着源码用cgicc+stl库之模板谓词函数对象

        总结1: 今天找到了昨天scanf的问题答案,scanf与printf一样的神奇而复杂,稍不留神,就会被坑.scanf函数在读入非空白符分割的多个字符串的解决方法是这个:/* 以 | 分割 * ...

  3. (三)跟我一起玩Linux网络服务:DHCP服务配置之主服务器配置

    我们今天来做DHCP服务器的配置,我们的前提示要实现用一台虚拟机做DHCP服务器 1.首先,我们要有DHCP软件,我们用到下面两个软件(可以使用其他方法从网上直接安装,具体方法网络搜索) dhcp-3 ...

  4. oracle创建第三方数据接口表,指定特定用户访问某张表

    /*****创建用户并指定操作哪张表开始******/ --1.创建用户并设置默认表空间 CREATE USER CHENGDWY IDENTIFIED BY CHENGDWY DEFAULT TAB ...

  5. sencha touch中按钮的ui配置选项值及使用效果

  6. 使用 fn 标签 解决字数过多时用省略号代替 .............................

    list列表单条记录某字段大于10就后面添加省略号(如:内容只是显示开始的10个字,后面的用省略号代替) 在list列表中单条记录某字段大于10就后面添加省略号, 首先引入 jstl标签: <% ...

  7. 如何更有效学习php开源项目的源码

    一.先把源代码安装起来,结合它的文档和手册,熟悉其功能和它的应用方式. 二.浏览源代码的目录结构,了解各个目录的功能. 三.经过以上两步后相信你对这个开源的产品有了一个初步的了解了,那现在就开始分析它 ...

  8. linux内核源码结构

    一.概述 Linux内核庞大,但是这些文件的结构还是有章可循的,分别位于不同的目录下,各个目录功能相对独立. 二.源码结构表 目录名 描述 arch 体系结构相关的代码,对于每个架构的CPU,arch ...

  9. Quartz1.8.5例子(二)

    /* * Copyright 2005 - 2009 Terracotta, Inc. * * Licensed under the Apache License, Version 2.0 (the ...

  10. 关于scroll无法绑定的问题

    关于jQuery的scroll([[data],fn])事件, 概述是:当用户滚动指定的元素(元素包括:所有可滚动的元素和 window 对象)时,会触发该事件. 如绑定窗口对象: $(window) ...