<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. SetCooperativeLevel函数介绍（设置协作等级）

    函数声明 function SetCooperativeLevel(hWnd: HWND; dwFlags: DWORD): HResult; stdcall; 参数介绍 hWnd        Di ...

  2. Sublime Text [Decode error - output not utf-8]

    改Sublime Text的python build的设置.将其编码设置为cp936. 打开Python.sublime-build文件,并添加”encoding”:”cp936″这一行,保存即可 S ...

  3. Flex中的FusionCharts 2D柱形图

    1.2D柱形图源码 <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:f ...

  4. Java中集合List，Map和Set的区别

    Java中集合List,Map和Set的区别 1.List和Set的父接口是Collection,而Map不是 2.List中的元素是有序的,可以重复的 3.Map是Key-Value映射关系,且Ke ...

  5. R语言实现对基因组SNV进行注释

    很多时候,我们需要对取出的SNV进行注释,这个时候可能会在R上进行注释,通常注释文件都含有Chr(染色体).Start(开始位点).End(结束位点).Description(描述),而我们的SNV文 ...

  6. 关于ios手机游览器针对overflow：hidden设置无效的解决办法

    Ordinarily, overflow: hidden; on the body tag is sufficient to prevent scrolling a web page, if for ...

  7. 关于vue-axios的post方式，后台无法解析传参问题

    启用jq方法更改数字格式 var params = {'addid':item.addid}; var str = $.param(params);

  8. python做基本的图像处理

    PIL是python中的图像处理类库,为python提供了基本的图像处理和基本操作.而PIL中最重要的就是Image模块,下面给出具体的例子来理解此模块. 读取一幅图像 我们用Image模块中的ope ...

  9. ASP.NET Core轻松入门之Middleware管道模型

    Middleware指的是微软的的asp.net core的管道模型.其原理可以用微软官方的下图展示: 原理如上图,随着Request的发起,HttpContext会经历多个管道处理(图中的箭头游走方 ...

  10. jQuery.proxy()的用法

    一:参考范文一 第一次接触jQuery.proxy()时感觉这个方法不实用,不明白它到底是个什么意思.今天来将jQuery官网上的解释进行一下翻译,顺便添加自己的理解和一些示例.proxy也可称为代理 ...