<html>
<body>
<img id="image"src=""/>
<br/>
<input type="file"onchange="selectImage(this);"/>
<br/>
<input type="button"onclick="uploadImage();"value="提交"/>
<div id="div"></div>
<script>
var image = '';
function selectImage(file){
if(!file.files || !file.files[0]){
return;
}
var reader = new FileReader();
reader.onload = function(evt){
document.getElementById('image').src = evt.target.result;
image = evt.target.result;
console.log(image)
}
reader.readAsDataURL(file.files[0]);
}
</script>
</body>
</html>

上边image 变量就是file文件二进制码

js获取input file文件二进制码的更多相关文章

  1. js 获取 input file 文件 附给 image src

    var a=document.querySelector('input[type=file]'); a.onchange = function (e) { //var reader = new Fil ...

  2. js 实现 input file 文件上传

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat=&qu ...

  3. js 获取input file路径改变图像地址

    html代码 <img id="newImage" alt="100x100" src="__PUBLIC__/img/1.jpg" ...

  4. js获取input file路径改变图像地址

    版权声明:好歹是我写的或者总结的或者抄的,总待给我个名份吧~ https://blog.csdn.net/sangjinchao/article/details/52250318 html代码 < ...

  5. js获取input file完整路径的方法

    function getPath(){  //判断浏览器  var Sys = {};  var obj = document.getElementById("headImg"); ...

  6. js获取 input file 图片缩略图

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. js 获取input type="file" 选择的文件大小、文件名称、上次修改时间、类型等信息

    文件名的传递 ---全路径获取 $('#file').change(function(){ $('#em').text($('#file').val()); }); 文件名的传递 ---只获取文件名 ...

  8. js获取上传文件内容(未完待续)

    js 获取上传文件的字节数及内容 <div> 上传文件 : <input type="file" name = "file" id = &qu ...

  9. Atitit.js获取上传文件全路径

    Atitit.js获取上传文件全路径 1. 默认的value只能获取文件名..安全原因.. 1 2. Firefox浏览器的读取 1 3. Html5 的file api 2 4. 解决方法::使用a ...

随机推荐

  1. java编程思想第四版第六章习题

    (略) (略) 创建两个包:debug和debugoff,他们都包含一个相同的类,该类有一个debug()方法,第一个版本显示发送给控制台的String参数,而第二版本什么也不做,使用静态import ...

  2. 关于linux下的嵌入式文件系统以及flash文件系统选择

    嵌入式linux下常见的文件系统 • RomFS:只读文件系统,可以放在ROM空间,也 可以在系统的RAM中,嵌入式linux中常用来作 根文件系统 • RamFS:利用VFS自身结构而形成的内存文件 ...

  3. R语言︱文本（字符串）处理与正则表达式

    处理文本是每一种计算机语言都应该具备的功能,但不是每一种语言都侧重于处理文本.R语言是统计的语言,处理文本不是它的强项,perl语言这方面的功能比R不知要强多少倍.幸运的是R语言的可扩展能力很强,DN ...

  4. JXL组件生成报表报错（二）

    JXL组件生成报表 1.具体报错如下: usage: java org.apache.catalina.startup.Catalina [ -config {pathname} ] [ -nonam ...

  5. zTree实现地市县三级级联Service接口测试

    zTree实现地市县三级级联Service接口测试 ProvinceServiceTest.java: /** * @Title:ProvinceServiceTest.java * @Package ...

  6. HTML5之Canvas画正方形

    HTML5之Canvas画正方形 1.设计源码 <!DOCTYPE html> <head> <meta charset="utf-8" /> ...

  7. 安装WebLogic的详细步骤

    安装WebLogic的详细步骤 1.在官网上下载WebLogic,详细地址如下 WebLogic 2.将WebLogic从官网上下载后wls1036_generic.jar 3.双击"wls ...

  8. 使用Gulp进行代码压缩的步骤以及配置

    一.安装步骤 1.首先确定是否安装了node.js,如果未安装,请先安装node.js: 2.确定是否安装了包管理工具npm,如未安装请安装:npm install npm -g: 3.安装gulp: ...

  9. Django学习-21-表关系参数

    一对多关系 ForeignKey(ForeignObject) # ForeignObject(RelatedField) to, # 要进行关联的表名 to_field=None, # 要关联的表中 ...

  10. SPOJ D-QUERY

    以前主席树学  kungbin 最近看了网上的版本 终于发现和我以前学的线段树差不多的了 希望最近能够加强 #include<bits/stdc++.h> using namespace ...