使用Html5怎么实现单张、多张图片上传功能-创新互联

这篇文章主要介绍了使用Html5怎么实现单张、多张图片上传功能，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

创新互联公司长期为1000+客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为浮梁企业提供专业的成都网站制作、成都网站设计、外贸营销网站建设，浮梁网站改版等技术服务。拥有10年丰富建站经验和众多成功案例,为您定制开发。

前言

今天我们聊一聊图片上传，单张Or多张，如今，各大图片上传插件数不胜数，例如：Jquery的 verupload.js，jQuery File Upload、Uploadify、jQuery.filter等等。But。上面说到的这些插件，今天我们不谈，我们来看一看使用HTML5中的FileReader 如何实现图片的单张及多张预览、删除、上传等功能。先看下实现后的效果如下：

使用Html5怎么实现单张、多张图片上传功能

2|0实现

2|1前端部分

这块是用户点击按钮其中我们最重要的一句话是input type=file 和给了一个multiple属性，可以满足多张图片上传


        俱乐部相册

$("#btnClubImg").click(function() { var $input = $("#ClubImagesUpload"); console.log($input); $input.on("change", function () { console.log(this);//打印改变后的当前元素 }); });

var fileReader = new FileReader();//实例化一个FileReader对象 var file_ = files[key];//获取当前文件 if (/^image\/\w+$/.test(file_.type)) {//将当前文件进行正则匹配，看是否是选择的图片 fileReader.onload = function() {//当读取操作完成时调用 } }

$("#clubInputImagePreview").css("background-image", "url(" + this.result + ")"); //使用apend再当前元素下追加一个子节点 $("#clubInputImagePreview") .append(""); //使用after 向当前兄弟节点追加一个同级节点 $("#clubInputImagePreview").after( "");

新网创想网站建设，新征程启航

使用Html5怎么实现单张、多张图片上传功能-创新互联

其他资讯