input的文件上传图片
<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的文件上传图片的更多相关文章
- input file文件上传图片显示web接口
https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader/readAsDataURL 方便简单实用 关注微信小程序
- vue <input type="file">上传图片、预览、删除
使用原生<input type="file">上传图片.预览.删除:multiple实现可上传多张 参数名 类型 说明 fileTypes Array 文件类型, 默认 ...
- input file 文件上传标签的样式美化
input file 文件上传标签的样式美化 将<input type="file">的透明度设置为0: <input type="file" ...
- input实现文件上传
input实现文件上传 input + ajax 实现文件上传,包括文件大小及类型的判断 一.html <input type="file" id="file&qu ...
- 一、H5(移动端)前端使用input type=file 上传图片,调用相机和相册
一.H5(移动端)前端使用input type=file 上传图片,调用相机和相册
- js 实现 input file 文件上传
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat=&qu ...
- input标签file文件上传图片本地预览
<input type="file" name="img-up" id="img-up" value="" /&g ...
- 如何使用PHP上传文件,上传图片,php上传教程,php表单文件上传教程
使用PHP进行文件上传,主要使用到表单功能和PHP内置的$_FILES函数功能.接下来我们看如何实现PHP上传功能.例子效果图,此例子是在Mac下进行调试成功的. PHP上传图片文件的功能代码如下: ...
- aspx页面中用Input 标签实现上传图片功能
实现上传图片功能需单独的建立一个aspx页面, 其中前台页面需要注意两点: a)实现上传功能的input的type="file" b)设置请求报文头为 enctype=" ...
随机推荐
- 基于Android的上课助手的概况及第一周冲刺详情
基于Android平台的上课助手 一. 功能简介 课表查询 课程提醒 空闲教室的查询 二. 开发环境 Android 三. 开发成员 组长:李志岩 成员:王亚蕊.孙 ...
- aws上redhat安装lmysql服务记
aws上redhat安装lmysql服务记 1.准备材料 1.1
- struts2.1.6教程四、OGNL与ValueStack(VS)
1.值栈入门 下面我们建立struts2ognl项目来练习ognl的使用. 步骤一.搭建strust2的开发环境 步骤二.建立LoginAction,主要代码如下: package com.asm; ...
- 前端小课堂 js:函数的创建方式及区别
js 函数的创建大体有这几种方式: -1-函数表达式(函数字面量): 说白了就是把一个函数赋值给了一个变量. var fun1 = function(index){ alert(index); } f ...
- 创建发布自己的npm包
我们基于nodejs平台上面的npm上,可以随意下载很多npm安装包.那我们如何创建自己的npm包呢?很简单,废话少说,开始做~ 开始做之前nodejs默认是要安装的,怎么安装自行百度其他教程. 首先 ...
- Introducing: Machine Learning in R(转)
Machine learning is a branch in computer science that studies the design of algorithms that can lear ...
- 代码检查工具jshint和csslint
前面的话 Douglas Crockford大神根据自己的理念用JavaScript写了一个JavaScript代码规范检查工具,这就是JSLint.后来非常流行,也的确帮助了广大的JavaScrip ...
- 微信小程序 生命周期函数详解
微信小程序 生命周期函数 小程序中 判断当前首页是从其他页面返回,还是由入口打开 由于小程序的数据在我们退出小程序时并没有得到释放,因此再次点击开来数据依然没有变成初始化 解决方法:在小程序 data ...
- [python] 1、python鼠标点击、移动事件应用——写一个自动下载百度音乐的程序
1.问题描述: 最近百度总爱做一些破坏用户信任度的事——文库金币变券.网盘限速,吓得我赶紧想办法把存在百度云音乐中的歌曲下载到本地. http://yinyueyun.baidu.com/ 可问题是云 ...
- 如何动态加载js文件,$.getScript()方法的使用
有时候我们需要动态在页面中加载js文件,jquery封装了getScript()方法,不用自己再创建标签了. 写法: $.getScript("name.js",function( ...