使用原生H5 input元素实现图片上传和图片文件大小限制以及宽高限制

用h5 input type="file"上传图片文件

html 设置拼接到需要的地方

var checkboxHtml = '<form enctype="multipart/form-data">n'+<div class="modal-body"> n'+<div class="my-img"> +</div> n' +<div class="my-show-img"ximg src="" class="show-img"> <a class="reUpLoad">重新上传</ax/div>'+<input style="display:none;" accept-",png, .jpg, .jpeg" type="file" name="txt file" id="txt file" multiple /><div class="img-tip">图片尺寸按照比例不得低于355px*78px，大小不能超过1M，支持jpg/png/jpeg格式</div>'+</div></div>in' +</form>';
<style>
.my- img
height:100px;
width:100px;
background-color:rgba(242，242，242，1);font-size:30px;
text-align:center;line-height:100px;
show-imgt
height:100px;
width:100px;
reUpLoadf
vertical-align:bottom;
my-show-imgf
display:none;
img-tip(
font-size: 12px;
color:rgba(0，，，0.3921568627459803);
</style>

js 通过点击样式触发input的click事件

$("#editapiInfoGroupFormContainer").on("click"," .my-img,.<em id="__mceDel">reUpLoad",function(e){ <br>　　$('#txt file').click(); //触发上传的事件<br>}) <br>$("#txt_file").unbind().change(function(e) { <br>　　console.log('Current value: , e.target.value); <br>　　var e = window.event e // change事件获取到的数据i <br>　　if (e.target.files[o].size > 1 * 124 * 124) {// 限制上传图片文件大小 <br>　　Tips.error('图片大小不能超过 1M!) <br>　　} <br>　　else if{ <br>　　　　getImagewidthAndHeight('txt_file', function (obj) { <br>　　　　　　if (obj.width <355 obj.height <78) { <br>　　　　　　　　Tips.error('操作提示 ， 图片尺寸按照比例不得低于355px*78px'); <br>　　　　　　　　return false; <br>　　　　　　}<br>　　　　} <br>　　　　oldFlag=true; <br>　　　　$(".my-show-img") .show(); <br>　　　　$(".my-img") .attr("style","display:none"); <br>　　　　var coverFile = e.target.files[o] ; <br>　　　　fileName =coverFile.name; // 获取图片地址 <br>　　　　var file = e.target .files[o]; <br>　　　　var reader = new FileReader()；<br>　　　　reader.readAsDataURL(file); <br>　　　　reader.onload = function (result) { <br>　　　　　　coverFile = result.target.result // 图片地址 Base64 格式的 可预览 <br>　　　　　　let blob= dataURLtoBlob(coverFile)　;<br>　　　　　　upLoadFile = blobToFile(blob,fileName);<br>　　　　　　$(".my-show-img img").attr("src",coverFile); <br>　　　　} } <br>     }); <br>   //获取input图片宽高和大小 <br>　　　　function getImageWidthAndHeight(id, callback) { <br>　　　　　　var _URL = window.URL || window.webkitURL; <br>　　　　　　$("#" + id).change(function (e) {<br>　　　　　　　　 var file, img; <br>　　　　　　　　if ((file = this.files[0])) { <br>　　　　　　　　　　img = new Image(); <br>　　　　　　　　　　img.onload = function () { <br>　　　　　　　　　　callback && callback({"width": this.width, "height": this.height, "filesize": file.size}); }; <br>　　　　　　　　　　img.src = _URL.createObjectURL(file); } });<br>     } <br>　　　　function dataURLtoBlob(dataurl) { 　　　　<br>        var arr = dataurl.split(','),</em>　　　　mime = arr[o].match(/:(.*?);/)[1],<br>　　　　bstr = atob(arr[1]),<br>　　　　n = bstr.length,<br>　　　　u8arr = new Uint8Array(n);<br>　　while (n--) {
　　　　u8arr[n] = bstr.charCodeAt(n);<br>　　}
　　return new Blob([u8arr], { type: mime });<br>}
function blobToFile(theBlob，fileName){
　　theBIob.lastModifiedDate = new Date(); // 文件最后的修改日期
　　theBlobname = fileName;
//文件名
　　return new File([theBlob], fileName, type: theBlob.type, lastModified: Date.now()});<br>} 