首页 > 其他分享 >input 上传图片文件限制文件大小和宽高

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

时间:2023-12-22 11:25:29浏览次数:41  
标签:function 文件大小 type 100px file 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,.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

相关文章

  • Vue + Django 使用wangeditor 上传图片 显示跨域报错
    报错:newsDetailed:1 AccesstoXMLHttpRequestat'http://www.py32api.com:8000/users/uploadFile/'fromorigin'http://localhost:8080'hasbeenblockedbyCORSpolicy:RequestheaderfieldtokenisnotallowedbyAccess-Control-Allow-Head......
  • C# 通过SshNet上传下载文件
    会把本地文件夹压缩成 .tar.gz文件后上传usingICSharpCode.SharpZipLib.GZip;usingICSharpCode.SharpZipLib.Tar;usingRenci.SshNet;usingSystem;usingSystem.IO;usingSystem.Windows.Forms;namespacePack{publicdelegatevoidAddTextLog(stringlog);......
  • asp.net core 3.x 解决文件上传大小限制
    如在Kestrel服务器下可以选择在CreateHostBuilder方法中统一移除所有上传限制。也可在指定的action上添加[DisableRequestSizeLimit]属性解除限制。//第一种在CreateHostBuilder中添加配置。publicstaticIHostBuilderCreateHostBuilder(string[]args){......
  • vue+element 上传文件及文件夹
    有需求需要做一个上传压缩包及文件夹的需求,记性不好,记录一下。HTML使用的element的upload和form表单,dropdown下拉菜单<div><el-col:span="24"><el-form-itemlabel="材料路径:"prop="fileName"><el-col:span="21&qu......
  • django+vue实现文件夹上传
    最近学django的文件上下传,网上的文件夹上下传压根没有,找了好几个,报错一大堆,没有一个能用,花里胡哨,可气!!!下面这个方法是我刚刚用过的,分享给大家。前端vue非常简单,template部分<inputtype="file"id="twos"webkitdirectory/><el-buttontype="primary"@click="sumfolder">文件夹......
  • Python接口自动化之文件上传/下载接口详解
    〇、前言文件上传/下载接口与普通接口类似,但是有细微的区别。如果需要发送文件到服务器,例如:上传文档、图片、视频等,就需要发送二进制数据,上传文件一般使用的都是Content-Type:multipart/form-data数据类型,可以发送文件,也可以发送相关的消息体数据。反之,文件下载就是将二进制格式......
  • vue上传图片到指定文件夹
    vue代码<template><divclass="app-container"> <divclass="wenben"><el-upload:disabled="dis==0?true:false"class="upload-demo":action="uploadUrl":on-......
  • Spring Boot学习随笔- 文件上传和下载(在线打卡、附件下载、MultipartFile)
    学习视频:【编程不良人】2021年SpringBoot最新最全教程第十二章、文件上传、下载文件上传文件上传是指将文件从客户端计算机传输到服务器的过程。上传思路前端的上传页面:提交方式必须为post,enctype属性必须为multipart/form-data开发后端的Controller后端方法接收参数......
  • 关于C#文件的上传和下载,文件流相关
    文件的上传和下载控制器:///<summary>///上传web文件///</summary>///<paramname="files"></param>///<paramname="wellName">井名</param>///<paramname="userName&quo......
  • uniapp app安卓、ios文件选择 (上传pdf word video img )等
    1、hybrid 必须放在项目根目录下,不然会调用失效:如图 2、建立nvue 子窗体  代码:1<template>2<viewclass="nvue">3<textclass="popup-item"@click="clickfun">选择文件</text>4<textclass="ddddd......