700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > js图片上传功能的实现 FileReader()

js图片上传功能的实现 FileReader()

时间:2021-07-03 13:28:59

相关推荐

js图片上传功能的实现  FileReader()

想要实现的功能是,点击一个上传的按钮,然后选中上传图片,在页面上可以看到上传的图片

一开始是

点击这个+之后,上传的图片就出现在+上,将其覆盖

实现的思路如下:

html页面上的要有input type=file来上传文件,由于上传按钮太丑了,所有将其隐藏起来,用add.png这个图片显示到页面上,accept是设置上传文件的类型,然后点击时调用getupload()事件

<input type="file" id="upload_file2" style="display: none;" accept="image/jpeg, image/gif,image/png,image/jpg" /><div id="cj2"><img id="img2" onclick="getupload('img2','upload_file2')" src="images/add.png"></div>

getupload()里面第一步执行上传,然后读取图片的内容,再返回即可。(看注释)

//图片上传、读取图片和在页面上显示function getupload(ids,upids){//点击隐藏的上传按钮file 图片上传$("#"+upids).click();$("#"+upids).off("change");//防止多次触发change事件$("#"+upids).change(function(){//获取读取的File对象var file = this.files[0] ? this.files[0] : null;if (!file) { return false; }var file_reader = new FileReader();//读取图片的操作 //FileReader主要用于将文件内容读入内存,通过一系列异步接口,可以在主线程中访问本地文件file_reader.readAsDataURL(file);//读取图片的内容生成的base64编码的图//读取完成后,执行该回调函数,它会返回读取的结果resultfile_reader.onload = (function(){var image_url = this.result; // 此时的图片已经存储到了result中$("#"+ids).attr('src', image_url); // 创建图片标签 });});}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。