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=" ...
随机推荐
- 导出CSV,导出excel数字过长显示科学计数法解决方案
再导出CSV表格时发现数字超过一定长度后会缩写成科学计数法,对于手机号和身份证就比较尴尬了. 在网上找了一下,大部分都是加"'"将数字转换为字符串,但是纠结于导出的数字前面有个单引 ...
- 第 16 章 MySQL Cluster
前言: MySQL Cluster 是一个基于 NDB Cluster 存储引擎的完整的分布式数据库系统.不仅仅具有高可用性,而且可以自动切分数据,冗余数据等高级功能.和 Oracle Real Cl ...
- Weighted Effect Coding: Dummy coding when size matters
If your regression model contains a categorical predictor variable, you commonly test the significan ...
- 原生js实现图片网格式渐显、渐隐效果
写正文前先吐槽一下:端午放假完第一天去某千人以上公司面试前端工程师,第一轮是我应聘职位的部门小领导,谈的不错,面试主要围绕要用到的技术来:第二轮来了我要说的正主,我了个去,问的问题一个和前端无关,问我 ...
- 一天搞定HTML----常用标签01
1.常用标签说明 2.其他类标签演示 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...
- javaCV开发详解之5:录制音频(录制麦克风)到本地文件/流媒体服务器(基于javax.sound、javaCV-FFMPEG)
javaCV系列文章: javacv开发详解之1:调用本机摄像头视频 javaCV开发详解之2:推流器实现,推本地摄像头视频到流媒体服务器以及摄像头录制视频功能实现(基于javaCV-FFMPEG.j ...
- datagrid 添加、修改、删除(转载)
原链接:JQueryEasyUI学习笔记(十)datagrid 添加.修改.删除 基于datagrid框架的删除.添加与修改: 主要是批量删除,双击表单修改.选中行修改,增加行修改,再有就是扩展edi ...
- JS/jQ常用宽高及应用
关于js的宽高,随便一搜就是一大堆.这个一大堆对我来说可不是什么好事,看的头都大了.所以今天就总结了一些比较会常用的,并说明一下应用场景. 先来扯一下documentElement和body的微妙关系 ...
- SQL Server2012数据库的备份和还原
一.数据库的备份: 1.选择要备份的数据库“accountInfo”,点击鼠标右键 → 任务 → 备份 2.在打开的“备份数据库 —accountInfo”对话框中,先点击删除,然后点击“添加” 3. ...
- Python 基础 (单、双引号区别) 不断补充
最近开始学习Python ,一些小细节的东西不是很理解,所以就记录一下,方便自己以后查看. 我的Python环境: Mac pro 10.12.3,Python3.5 ,Pycharm 多句题外话:公 ...