H5移动端实现仿QQ空间照片上传效果代码

最近在做项目的时候需要实现一个手机端上传图片效果，但是本来想用H5 的 multiple属性进行一次性多图上传，无奈安卓系统兼容性硬伤，暂时找不到兼容安卓网页版的多图上传方案，于是就仿了QQ空间网页版的图片上传效果。代码如下：

效果图：

javascript部分：

 <script>//获取文件urlfunction createObjectURL(blob){if (window.URL){return window.URL.createObjectURL(blob);} else if (window.webkitURL){return window.webkitURL.createObjectURL(blob);} else {return null;}}var box = $("#fileBox .review-box");    //显示图片boxvar file = $("#file"); //file对象var domFragment =  document.createDocumentFragment();   //文档流优化多次改动dom$("#fileBox").on("click", ".file-btn",function(){var index = $(this).parent().index();if(index == 6){alert("最多可以上传4张图片！");return false;}});//触发选中文件事件$("#fileBox").on("change", ".file-btn", function(event){var imgNum = parseInt($("#fileBox .review-box img").length);if(imgNum < 4){var file = event.target.files;  //获取选中的文件对象var imgTag = $("<img src=''/>");var fileName = file[0].name;    //获取当前文件的文件名var url = createObjectURL(file[0]); //获取当前文件对象的URL//忽略大小写var jpg = (fileName.indexOf(".jpg") > -1) || (fileName.toLowerCase().indexOf(".jpg") > -1);var png = (fileName.indexOf(".png") > -1) || (fileName.toLowerCase().indexOf(".png") > -1);var jpeg = (fileName.indexOf(".jpeg") > -1) || (fileName.toLowerCase().indexOf(".jpeg") > -1);//判断文件是否是图片类型if(jpg || png || jpeg){imgTag.attr("src",url);}else{alert("请选择图片类型文件！");}//最佳显示var imgbox = $("<div class='prev-item'><span class='closebtn'>×</span></div>");imgbox.append(imgTag);box.append(imgbox);event.target.parentNode.style.display = "none";var cloneDom = $(".clone-dom").eq(0).clone().removeAttr("style");$("#fileBox").append(cloneDom);}});$(".review-box").on("click", ".prev-item", function(){var index = $(this).index();$(this).remove();$("#fileBox label:eq(" + (index + 1) + ")").remove();});</script><!--选择图片上传-->

HTML部分：

<!--选择图片上传--><div class="form-group"><label><strong style="color:#FF0000;">&nbsp;</strong>执照图片：</label><label class="openflag"><input type="checkbox" class="hidden" value="" />不公开</label><div class="file-box clearboth" id="fileBox"><!--克隆的节点--><label class="clone-dom" style="display:none;"><input type="file" class="file-btn" name="img[]"/></label><!--克隆的节点--><div class="review-box"></div><label><input type="file" class="file-btn clone-dom" name="img[]"/></label></div></div>

CSS部分：

/******图片上传******/
#fileBox{margin:1rem 0;}
#fileBox label{display:block;float:left;height:50px;width:50px;background:url(../../img/uploadImg_bg.png) no-repeat center;}
#fileBox .file-btn{height:50px;width:50px;margin:0 .5rem .5rem 0;opacity:0;}
#fileBox .review-box{display:block;float:left;}
#fileBox .review-box img{height:50px;width:50px;margin:0 .5rem .5rem 0;}
#fileBox .prev-item{position:relative;display:inline-block;}
#fileBox .prev-item .closebtn{position:absolute;right: -1px;top: -4px;display: block;height: 14px;width: 14px;color: #fff;font-size: 16px;line-height:14px; text-align: center;background: red;border-radius: 10px;}
/******图片上传******/

天气好热，租不起空调房的孩子晚上睡觉真的是…….

H5移动端实现仿QQ空间照片上传效果代码相关推荐

基于ueditor开发的仿QQ空间照片上传功能
因为项目中需要用到文章编辑和图片上传的功能,因此便在网上搜索相关的材料,发现ueditor是个非常好用的插件,同时提供的图片上传的功能正好可以用来做我们项目中的上传照片,因此花了两天时间,把uedit ...
QQ空间照片上传HTML代码演示
引用css <link rel="stylesheet" href="css/photo.css"> 展示相关代码演示如下: <div cla ...
h5移动端，类似qq空间、朋友圈不规则图片显示适配功能
前言最近再做个H5移动端社交类型项目的时候,里面有一块类似朋友圈.qq空间展示的模块,开发的时候发现了一个问题,就是展示用户上传的图片,因为用户上传的图片可能是相机拍的,可能是截图.可能是网上找 ...
java 仿qq空间_仿QQ空间和微信朋友圈，高解耦高复用高灵活
先看看效果: 用极少的代码实现了动态详情及二级评论的数据获取与处理和 UI显示与交互,并且高解耦.高复用.高灵活. 动态列表界面MomentListFragment支持下拉刷新与上拉加载 ...
【Android UI设计与开发】第09期：底部菜单栏（四）Fragment+PopupWindow仿QQ空间最新版底部菜单栏
转载请注明出处:http://blog.csdn.net/yangyu20121224/article/details/9023451 在今天的这篇文章当中,我依然会以实战加理论结合 ...
java仿qq空间音乐播放_完美实现仿QQ空间评论回复特效
评论回复是个很常见的东西,但是各大网站实现的方式却不尽相同.大体上有两种方式 1. 像优酷这种最常见,在输入框中@要回复的人,这种方式下,用www.cppcns.com户可以修改@. 新浪微博则是在这 ...
html5仿qq空间,JS实现的仿QQ空间图片弹出效果代码
本文实例讲述了JS实现的仿QQ空间图片弹出效果代码.分享给大家供大家参考,具体如下: function imageShow(which_click) { var image_path = which_ ...
php 朋友圈留言,php实例-PHP仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能（上）...
我们大部分人都发过动态,想必都知道发动态.回复评论.删除动态的整个过程,那么这个功能是如何实现的呢?下面小编给大家带来了实例代码,对PHP仿qq空间或朋友圈发布动态.评论动态.回复评论.删除动态或评论 ...
仿QQ空间图片放缩查看
仿QQ空间图片放缩查看仿QQ空间图片放缩查看,点击图片从原位置放大到全屏,后退从全屏缩小到原位置,效果非常好. 下载地址:http://www.devstore.cn/code/info/830.h ...

H5移动端实现仿QQ空间照片上传效果代码

H5移动端实现仿QQ空间照片上传效果代码相关推荐

最新文章

热门文章