手机端图片预览

来源:互联网 发布: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
原创粉丝点击