移动端 点击图片放大

实现原理：
通过判断在线预览 img的宽度来改变图片的大小，jQ里面 width()可以获取到 元素的宽度。
1.HTM部分：

<p>
    <span>上传附件：</span>      
    <input type="file" accept="image/*" capture="camera" class='file' id='uploadImg' value=''>      
</p>
<div class='boxImg'>
    <img src="" class='imgShow'/>
</div>
<div class="mengban"></div>

2.CSS部分：

        p,input{font-size: .35rem;}
        .boxImg{
            width: 4rem;height: 4rem;
            border: .01rem solid #999999;
            margin: 1rem auto;
        }
        .imgShow{
            width: 100%;height: 100%;
        }
        .changeImg{
            width: 6rem;height: 6rem;
            position: absolute;
            top: 2rem;left: .75rem;
            z-index: 5;
        }
        .mengban{
            width: 100%;height: 13.34rem;
            background: rgba(0,0,0,.5);
            position: absolute;
            top: 0;left: 0;
            display: none;
        }

3.JS部分：

$('#uploadImg').on('change',function(){    //做了一个本地预览
        var file = $(this)
        var fileObj = file[0];  //获取当前元素
        var dataURL;
        var windowURL = window.URL;
        if(fileObj.files[0]){
            dataURL = windowURL.createObjectURL(fileObj.files[0])   //创建一个新的对象URL
            $('.imgShow').attr('src',dataURL);
        }else{
            dataURL = file.val();
            console.log(dataURL)
            $('.imgShow').style.filter = 'progid:DXImageTransform.Micsoft.AlphaImageLoader(sizingMethod = scale)'
            $('.imgShow').filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = dataURL;     
        }
       //点击图片放大
        $('.imgShow').click(function(){
            var width = $('.imgShow').width();
            console.log(width)          
            if(width == '200'){
                $('.mengban').show();
                $('.imgShow').addClass('changeImg')
            }
            $('.mengban').click(function(){
                $('.imgShow').removeClass('changeImg')
                $('.mengban').hide();
            })
        })
        //上传图片到服务器，这里用的是 ajaxFileUpload 插件上传
         $.ajaxFileUpload({
             url:"",
             fileElementId: "uploadImg",
             dataType: "string",
             success: function(data) {
                 //图片路径
                 $('.imgShow').attr("src",data);
           }
        });         
    })