<img id="headIMG" src="img/header_default.jpg"/>
<input type="file" name="upload_head" id="inputFile">
<script>
$(document).ready(function() {
$("#inputFile").change(function() {
var fil = this.files;
for(var i = 0; i < fil.length; i++) {
reads(fil[i]);
}
});
});
function reads(fil) {
var reader = new FileReader();
reader.readAsDataURL(fil);
reader.onload = function() {
document.getElementById('headIMG').setAttribute('src',reader.result);
};
}
</script>

复制代码查看效果

input的文件上传图片的更多相关文章

  1. input file文件上传图片显示web接口

    https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader/readAsDataURL  方便简单实用 关注微信小程序

  2. vue <input type="file">上传图片、预览、删除

    使用原生<input type="file">上传图片.预览.删除:multiple实现可上传多张 参数名 类型 说明 fileTypes Array 文件类型, 默认 ...

  3. input file 文件上传标签的样式美化

    input file 文件上传标签的样式美化 将<input type="file">的透明度设置为0: <input type="file" ...

  4. input实现文件上传

    input实现文件上传 input + ajax 实现文件上传,包括文件大小及类型的判断 一.html <input type="file" id="file&qu ...

  5. 一、H5(移动端)前端使用input type=file 上传图片,调用相机和相册

    一.H5(移动端)前端使用input type=file 上传图片,调用相机和相册

  6. js 实现 input file 文件上传

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

  7. input标签file文件上传图片本地预览

    <input type="file" name="img-up" id="img-up" value="" /&g ...

  8. 如何使用PHP上传文件,上传图片,php上传教程,php表单文件上传教程

    使用PHP进行文件上传,主要使用到表单功能和PHP内置的$_FILES函数功能.接下来我们看如何实现PHP上传功能.例子效果图,此例子是在Mac下进行调试成功的. PHP上传图片文件的功能代码如下: ...

  9. aspx页面中用Input 标签实现上传图片功能

    实现上传图片功能需单独的建立一个aspx页面, 其中前台页面需要注意两点: a)实现上传功能的input的type="file" b)设置请求报文头为 enctype=" ...

随机推荐

  1. Ajax01 什么是ajax、获取ajax对象、ajax对象的属性和方法

    1 什么是ajax ajax是一种用来改善用户体验的技术,其本质是利用浏览器提供的一个对象(XMLHttpRequest,也可称之为ajax对象) 向服务器发送异步请求;服务器返回部分数据(不是一个完 ...

  2. OpenStack dashboard界面操作 实现登陆虚拟机并通信

    1.创建项目,点击"创建项目" (1).填写项目信息 (2).添加与之关联的项目成员 (3).点击"配额",为用户在平台上分配一个操作的空间,便于用户创建网络, ...

  3. MyBatis通用Mapper开发

    通常情况下,MyBatis 的增删改查操作需要自己在相应xml中写相关语句, 但是运用相关工具,其实可以很方便的自动生成单表的所有增删改查(通用的多表联合查询还是需要自己写). 也可以根据具体环境,设 ...

  4. markdown 基础语法

    markdown 基础 你好,我是markdown文档 介绍 Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式. 说的简单一点,mar ...

  5. 两强相争,鹿死谁手 — JQuery中的Ajax与AngularJS中的$http

    一.JQuery与AngularJS 首先,先简单的了解一下JQuery与AngularJS.从源头上来说,两者都属于原生JS所封装成的库,两种为平行关系. 二.Ajax请求与数据遍历打印 这里是Aj ...

  6. flash2print文档在线预览应用(java,.net)

    一.背景 前段时间,LZ的boss突然给了出了这样一个需求:将原项目中的所有文章关联的附件TXT.PDF.office相关文件全部以flash的形式在网页上进行展示,便于预览.看似简单的需求,整个研发 ...

  7. (原创) Maven查看JAR包的依赖关系

    如果是用命令行,可进入项目所在目录,然后输入: mvn dependency:tree ,来查看jar包依赖关系. 另外还可以在eclipse操作,如下图所示: 点击run后,开始输出JAR包依赖树. ...

  8. FLAnimatedImageView处理gif过程

    FLAnimatedImageView处理gif过程 时间控制原理 GIF图片每一帧的delayTime可能都不一样: 在展示下一帧的时间控制机制,不能根据以第一帧为准: 或总动画时长除以帧数来简单做 ...

  9. es6之各种数据类型的扩展

    一. 字符串的扩展 为字符串添加了Iterator,可以被for...of遍历 includes.startsWith.endsWith都会返回布尔值,且支持第二个参数(开始搜索的位置),endsWi ...

  10. cookie的路径问题

    今天公司网站(不考虑跨域访问情况)有个需求就是在一个路径下存一个cookie 比如这样 www.fdf.com/vichain/dashback/myback  在这个目录下存放一个cookie 在这 ...