<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. 基于Android的上课助手的概况及第一周冲刺详情

    基于Android平台的上课助手 一.       功能简介 课表查询 课程提醒 空闲教室的查询 二.       开发环境 Android 三.       开发成员 组长:李志岩 成员:王亚蕊.孙 ...

  2. aws上redhat安装lmysql服务记

    aws上redhat安装lmysql服务记 1.准备材料 1.1

  3. struts2.1.6教程四、OGNL与ValueStack(VS)

    1.值栈入门 下面我们建立struts2ognl项目来练习ognl的使用. 步骤一.搭建strust2的开发环境 步骤二.建立LoginAction,主要代码如下: package com.asm; ...

  4. 前端小课堂 js:函数的创建方式及区别

    js 函数的创建大体有这几种方式: -1-函数表达式(函数字面量): 说白了就是把一个函数赋值给了一个变量. var fun1 = function(index){ alert(index); } f ...

  5. 创建发布自己的npm包

    我们基于nodejs平台上面的npm上,可以随意下载很多npm安装包.那我们如何创建自己的npm包呢?很简单,废话少说,开始做~ 开始做之前nodejs默认是要安装的,怎么安装自行百度其他教程. 首先 ...

  6. Introducing: Machine Learning in R(转)

    Machine learning is a branch in computer science that studies the design of algorithms that can lear ...

  7. 代码检查工具jshint和csslint

    前面的话 Douglas Crockford大神根据自己的理念用JavaScript写了一个JavaScript代码规范检查工具,这就是JSLint.后来非常流行,也的确帮助了广大的JavaScrip ...

  8. 微信小程序 生命周期函数详解

    微信小程序 生命周期函数 小程序中 判断当前首页是从其他页面返回,还是由入口打开 由于小程序的数据在我们退出小程序时并没有得到释放,因此再次点击开来数据依然没有变成初始化 解决方法:在小程序 data ...

  9. [python] 1、python鼠标点击、移动事件应用——写一个自动下载百度音乐的程序

    1.问题描述: 最近百度总爱做一些破坏用户信任度的事——文库金币变券.网盘限速,吓得我赶紧想办法把存在百度云音乐中的歌曲下载到本地. http://yinyueyun.baidu.com/ 可问题是云 ...

  10. 如何动态加载js文件,$.getScript()方法的使用

    有时候我们需要动态在页面中加载js文件,jquery封装了getScript()方法,不用自己再创建标签了. 写法: $.getScript("name.js",function( ...