手机端图片预览
来源:互联网 发布:mac 隐藏磁盘 编辑:程序博客网 时间:2024/03/29 05:05
公司一个项目手机端要用到图片预览的东西,搞插件又碰到各种问题 搞得脑袋大 恰好公司有个大神 就请教了一番 大神想了个很奇特的办法 –实现前后端分离 即前端只是实现图片预览的效果 而后台依旧用之前的input=file 来实现。
步骤一:
首先 建立一个空的div 用来存储后台要获取的 input file文件 为了不影响页面 设置为不可见
<div id="fileValue" style="display: none;"></div>
二、
HTML结构
"> <div class="weui-cell__hd"><label for="" class="weui-label">身份证照</label></div> <div class="weui-cell__bd"> <div class="weui-uploader__bd id-card"> <ul class="weui_uploader_files preview-list"> </ul> <div class="weui_uploader_input_wrp weui-uploader__input-box"> <input class="js_file weui-uploader__input" type="button" accept="image/*" multiple="" id="file0" name="file0"></div> </div> </div> </div> </div>
随便放点样式 请不要介意
<style type="text/css"> *{list-style: none;} .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden} .idItem .weui-uploader__file{position: relative;} .idItem .weui-uploader__file .weui-icon-cancel{position: absolute; right: -10px; top: -5px;} .idItem .weui-uploader__bd{overflow: inherit;} </style>
三、接下来放重点
<script type="text/javascript"> //建立一個可存取到該file的url function getObjectURL(file) { var url = null ; if (window.createObjectURL!=undefined) { // basic url = window.createObjectURL(file) ; } else if (window.URL!=undefined) { // mozilla(firefox) url = window.URL.createObjectURL(file) ; } else if (window.webkitURL!=undefined) { // webkit or chrome url = window.webkitURL.createObjectURL(file) ; } return url ; } /*删除*/ function deleteItem(obj){ var item = $(obj).parent('li'); var index = item.index(); item.remove(); $("#fileValue input").eq(index).remove(); } /***************************************************/ var allowTypes = ['image/jpg', 'image/jpeg', 'image/png', 'image/gif']; var maxSize = (1024 * 1024) * 5; // 最大上传图片数量 var maxCount = 2; $("#file0").on("click",function () { var input = '<input type="file">'; $("#fileValue").append(input); $("#fileValue input").last().click(); }); $("#fileValue").on("change","input",function (event) { var files = event.target.files; // 如果没有选中文件,直接返回 if (files.length === 0) { return; } for (var i = 0, len = files.length; i < len; i++) { var file = files[i]; var reader = new FileReader(); // 如果类型不在允许的类型范围内 if (allowTypes.indexOf(file.type) === -1) { alert('该类型不允许上传'); $(this).val(""); return; } if (file.size > maxSize) { alert('图片太大,不允许上传'); $(this).val(""); return; } if ($('.weui-uploader__file').length >= maxCount) { alert('最多只能上传' + maxCount + '张图片'); $(this).val(""); return; } } $("#fileValue input").each(function(){ if(!$(this).val()){ $(this).remove(); } }); var file = this.files[0]; var url = getObjectURL(file); $(".preview-list").append('<li class="weui-uploader__file" style="background-image: url('+ url+');"><i class="weui-icon-cancel" onclick="deleteItem(this)"></i></li>'); }); </script>
我还没完全看懂 容我去理解一边~
0 0
- 手机端图片预览
- html预览手机本地图片
- 【总结】【图片预览】手机预览图片插件iSlider使用总结
- html5 手机端异步上传预览图片(文件) FileReader对象
- 手机端的多图片剪辑上传支持手势支持预览
- 【总结】手机图片预览插件photoswipe使用总结
- HTML5 MUI 手机预览图片,裁剪上传base64,保存数据库
- 移动端图片上传预览
- 图片预览
- 图片预览
- 图片预览
- 图片预览
- 图片预览
- 图片预览
- 预览图片
- 图片预览
- 预览图片
- 图片预览
- 常用正则表达式
- hive 分区(partition)简介
- cs231n assignment1--two_layer_net
- [Spring]Redis+Spring整合
- 448. Find All Numbers Disappeared in an Array
- 手机端图片预览
- 三天打鱼两天结网程序
- maven 发布jar到Nexus 私服
- 滴滴 webapp 5.0 Vue 2.0 重构经验分享
- IT职业发展
- java内存区域与内存溢出异常
- kaka-manager和kafka-offset-monitor的安装和使用
- int main(int argc,char* argv[])详解,以及与int main()有什么区别
- zigbee实现网络加入过滤(相当于白名单)