<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. H5与客户端联调

    进行H5移动端开发时,我们可以使用谷歌浏览器的设备工具栏进行,此方法实时方便快速,但这也是有限的,当我们需要在特定机型特定系统或者在webview中调试时,这种方法就显得很吃力了. 安卓: 一.与安卓 ...

  2. 论MySQL何时使用索引,何时不使用索引

    索引: 使用索引可快速访问数据库表中的特定信息.索引是对数据库表中一列或多列的值进行排序的一种结构,例如 employee 表的姓(name)列.如果要按姓查找特定职员,与必须搜索表中的所有行相比,索 ...

  3. 我来谈谈PHP和JAVA的区别

    这里的标题写的是谈谈PHP和JAVA的区别,其实是委婉的说法,其实别人是想听PHP好还是JAVA好!!! 从而从中找到存在感!!! 因为由于我是从多年的php开发转到java开发的.所以最,不时的有好 ...

  4. 【Python的迭代器,生成器】

    一.可迭代对象和迭代器 1.迭代的概念 上一次输出的结果为下一次输入的初始值,重复的过程称为迭代,每次重复即一次迭代,并且每次迭代的结果是下一次迭代的初始值 注:循环不是迭代 while True: ...

  5. mongoDB数据库的简单使用

    我的第一篇小文章,以前总是写Evernote. mongodb属于非关系型数据库中的文档型数据库. 1.下载安装mongoDB, 文件自动 存放在这个目录下:C:\Program Files\Mong ...

  6. \classes\META-INF\MANIFEST.MF (系统找不到指定的路径。)

    开发项目重启eclipse 发现了如下错误! 解决方法 选择出现错误的项目 点击clean 即可~

  7. jquery表单序列化

    $(function(){ $('#send').click(function(){ $.ajax({ type: "GET", url: "test.json" ...

  8. 关于Python中yield的一些个人见解

    # 样例代码def yield_test(n): for i in range(n): yield call(i) print("i=",i) #做一些其它的事情 print(&q ...

  9. 【Windows 10 应用开发】使用快捷访问键

    UWP 虽然主要面向触控操作,但 Windows 设备是万能工具,不用手指不用笔的时候,也可能会接上键盘耍耍.因此,给应用界面上的一些元素弄个快捷访问键也挺不错的.为了使用 Windows 上的各类应 ...

  10. 关于CSS样式优先级学习心得

    1.未重复时候,只要有都有格式显示 2.重复时,看权值: 权值:标签 1 <类10< ID 100 PS:(*权值 > 继承(表格属性一般无法继承,有些浏览器也不支持表格继承父标签) ...