博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
html语言中怎么上传图片,HTML5中怎么访问本地图片,然后上传到页面显示?
阅读量:7024 次
发布时间:2019-06-28

本文共 684 字,大约阅读时间需要 2 分钟。

读图片文件

var result = document.getElementById("result");

var file = document.getElementById("file");

//判断浏览器是否支持FileReader接口

if(typeof FileReader == 'undefined') {

result.InnerHTML = "

你的浏览器不支持FileReader接口!

";

//使选择控件不可操作

file.setAttribute("disabled", "disabled"); //使得之前操作失效,重新启动

}

function readAsDataURL() {

//检验是否为图像文件

var file = document.getElementById("file").files[0];

if(!/image\/\w+/.test(file.type)) {

alert("这不是图片文件!请检查!");

return false;

}

var reader = new FileReader();

//将文件以Data URL形式读入页面

reader.readAsDataURL(file);

reader.onload = function(e) {

var result = document.getElementById("result");

//显示文件

result.innerHTML = '';

}

}

* {

margin: 0;

padding: 0;

}

请选择一个图片文件:

图片显示区

转载地址:http://zysxl.baihongyu.com/

你可能感兴趣的文章
vs 生成事件
查看>>
ES6语法
查看>>
universal image loader
查看>>
2017年西南民族大学程序设计竞赛-网络同步赛
查看>>
AbstractCollection源码分析
查看>>
JQuery图表插件——Highcharts
查看>>
python数据可视化
查看>>
JSP代码执行顺序
查看>>
SQL Server-聚焦SNAPSHOT基于行版本隔离级别详解(三十)
查看>>
消除一个数组中重复的元素
查看>>
Asp.net中使用资源文件实现网站多语言
查看>>
JavaScript(2)
查看>>
Apache Tomcat6 之连接器学习整理(1)
查看>>
winedt打开.tex文件时会出现reading error,看不到任何文字
查看>>
Myeclipse配置jad
查看>>
mac下搭建MySql环境
查看>>
第六周周记
查看>>
jmeter 实战项目总结2——微信端
查看>>
Java面试题总结-Day3
查看>>
xml基础小结
查看>>