H5移动端实现图片上传

效果图：

Html代码：

             <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>

js代码：

 <script type="text/javascript">//获取文件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);var jpeg = (fileName.indexOf(".gif") > -1) || (fileName.toLowerCase().indexOf(".gif") > -1);var jpeg = (fileName.indexOf(".bmp") > -1) || (fileName.toLowerCase().indexOf(".bmp") > -1);//判断文件是否是图片类型if(jpg || png || jpeg || gif || bmp){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>

CSS代码：

     #fileBox{margin:/*1*/rem 0;} #fileBox label{border: 1px solid #ccc;display:block;float:left;height:60px;width:60px;background:url(../img/images/images/xiang1_06.png) no-repeat center;background-size: .19rem;background-color: #ccc;margin-left: .17rem;} #fileBox .file-btn{height:50px;width:50px;margin:0 .5rem .5rem 0;opacity:0;} #fileBox .review-box{display:block;float:left;margin-left: .17rem;} #fileBox .review-box img{height:60px;width:60px;margin:0 .1rem .2rem 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;}#fileBox .prev-item .closebtn {position: absolute;right: 7px; top: -4px;display: block;height: 14px;width: 14px;color: #fff;font-size: 16px;line-height: 14px;text-align: center;background: #8E8E93;border-radius: 10px;}

别忘了引进jq文件哦！！！

H5移动端实现图片上传相关推荐

h5 php 拍照上传图片,H5拍照、选择图片上传组件核心
背景前段时间项目重构,改成SSR的项目,但之前用的图片选择上传组件不支持SSR(server-side-render).遂进行了调研,发现很多的工具.但有的太大,有的使用麻烦,有的不满足使用需求.决 ...
H5拍照、选择图片上传组件核心
背景前段时间项目重构,改成SSR的项目,但之前用的图片选择上传组件不支持SSR(server-side-render).遂进行了调研,发现很多的工具.但有的太大,有的使用麻烦,有的不满足使用需求.决 ...
移动端实现图片上传
需求公司现在在移动端使用webuploader实现图片上传,但最近需求太奇葩了,插件无法满足我们的PM 经过商讨决定下掉这个插件,使用H5原生的API实现图片上传. 7.3日发布:单张图片上传 9. ...
php微信小程序多图上传,tp5实现微信小程序多图片上传到服务器功能
最近在做一个教育类的小商城的微信小程序,用到了上传多个图片文件到服务器端,这里做一个讲解,希望对大家有所帮助. 1,小程序端: 在wxml文件中: 删除点击上传作业在js文件中: Page({ / ...
html图片上传阅览并且点击放大
关闭 qq_31540195的博客目录视图摘要视图订阅异步赠书:9月重磅新书升级,本本经典程序员9月书讯每周荐书:ES6.虚拟现实.物联网(评论送书) htm ...
php ckeditor 上传图片,CKEditor图片上传的PHP实现
编辑文章是网站后台的常用功能,CKEditor是目前流行的富文本编辑器,它使用方便但要做一些配置才能实现上传本地图片到服务器的功能.在参考了一篇java下CKEditor图片上传的博文后,我用PHP实 ...
android h5 多图上传源码,JS移动端/H5同时选择多张图片上传并使用canvas压缩图片...
最近在做一个H5的项目,里边涉及到拍照上传图片的功能以及识别图片的功能,这里对识别图片的功能不做赘述,不属本文范畴.我在做完并上线项目后,同事跟我提了一个要求是可不可以同时选择多张图片上传,我做的时候 ...
移动端H5实现图片上传
效果图基础知识 FormData 通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对.它可以更灵活方便的发送表单数据,因为可以独立于表单使用.如果你把表单的编码类 ...
移动端H5图片上传的那些坑
上周做一个关于移动端图片压缩上传的功能.期间踩了几个坑,在此总结下. 大体的思路是,部分API的兼容性请参照caniuse: 利用FileReader,读取blob对象,或者是file对象,将图片转化 ...

H5移动端实现图片上传

H5移动端实现图片上传相关推荐

最新文章

热门文章