input 上传图片文件限制文件大小和宽高

发布时间 2023-12-22 11:16:36作者: 世界我快乐

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

  样式结果