手机端图片预览

公司一个项目手机端要用到图片预览的东西，搞插件又碰到各种问题 搞得脑袋大 恰好公司有个大神 就请教了一番 大神想了个很奇特的办法 –实现前后端分离 即前端只是实现图片预览的效果 而后台依旧用之前的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>

我还没完全看懂 容我去理解一边~