html5 input file img,HTML5读取input[type=file]中的图片

56 阅读 0 评论 37 点赞

我是靠谱客的博主闪闪小馒头，最近开发中收集的这篇文章主要介绍html5 input file img,HTML5读取input[type=file]中的图片，觉得挺不错的，现在分享给大家，希望可以做个参考。

在我们做用户注册的时候经常会设计到用户头像之类的上传，这时我们会用到一个标签，但是我们该怎样获取标签中选取的图片呢？

这里我们使用HTML5中的FileReader接口来实现这样的操作。

demo

我用如下代码来讲述该怎样实现这样的操作：

HTML代码：

获取图片

首先，肯定会有一个已经，form写不写action和method无所谓，因为既然我们要用JS/JQ来获取表单的文件，那多半是要用到ajax来传输数据了。闲话不多说，先搞定获取图片的问题，再考虑接下来的。

CSS代码：

.addBorder{

border:1px solid #ccc;

}

#imgDiv{

width:100px;

height:100px;

}

#imgContent{

width: 100%;

height:100%;

}这里CSS代码不过多赘述，只是简单地给元素一些样式。

JS代码：

function loadImg(){

//获取文件

var file = $("#imgForm").find("input")[0].files[0];

//创建读取文件的对象

var reader = new FileReader();

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。