用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,.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()});
}
样式结果
标签:function,文件大小,type,100px,file,input,上传 From: https://www.cnblogs.com/changyuqing/p/17920863.html