实现原理：
通过判断在线预览 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);}}); })
如果觉得《移动端 点击图片放大》对你有帮助，请点赞、收藏，并留下你的观点哦！
