js上传图片限制大小
❶ 浏览器会限制js上传文件大小吗
浏览器是不会限制js上传文件的大小的，但是js代码可以控制
因为上传操作是代码处理的浏览器不会自动帮你上传文件
❷ js/jquery校验上传图片后缀为gif|png|jpeg|jpg格式的图片，尺寸为512*512 校验，大小限制为300k的文件
<input type="file" name="myFile" id="form01" />
function validate_edit_logo(a){
var file = $('file').value;
if(!/.(gif|jpg|jpeg|png|gif|jpg|png)$/.test(file)){
alert("图片类型必须是.gif,jpeg,jpg,png中的一种")
if(a==1){
return false;
}
}else{
var image = new image();
image.src = file;
var height = image.height;
var width = image.width;
var filesize = image.filesize;
$('beforeend').src=file;
$('div_regi_right').setstyle('display', 'block');
if(width>512 && height>512 && filesize>300k){
alert('请上传512*512像素 或者大小小于300k的图片');
if(a==1){
return false;
}
}
if(a==1){
return true;
}
}
}
❸ 如何在上传图片时在客户端用js判断图片大小并弹出提示
参考：
<script language=javascript>
var ImgObj=new Image(); //建立一个图像对象
var AllImgExt=".jpg|.jpeg|.gif|.bmp|.png|"//全部图片格式类型
var FileObj,ImgFileSize,ImgWidth,ImgHeight,FileExt,ErrMsg,FileMsg,HasCheked,IsImg//全局变量 图片相关属性
//以下为限制变量
var AllowExt=".jpg|.gif" //允许上传的文件类型 ŀ为无限制 每个扩展名后边要加一个"|" 小写字母表示
//var AllowExt=0
var AllowImgFileSize=70; //允许上传图片文件的大小 0为无限制 单位：KB
var AllowImgWidth=500; //允许上传的图片的宽度 ŀ为无限制 单位：px(像素)
var AllowImgHeight=500; //允许上传的图片的高度 ŀ为无限制 单位：px(像素)
HasChecked=false;
function CheckProperty(obj) //检测图像属性
{
FileObj=obj;
if(ErrMsg!="") //检测是否为正确的图像文件 返回出错信息并重置
{
ShowMsg(ErrMsg,false);
return false; //返回
}
if(ImgObj.readyState!="complete") //如果图像是未加载完成进行循环检测
{
setTimeout("CheckProperty(FileObj)",500);
return false;
}
ImgFileSize=Math.round(ImgObj.fileSize/1024*100)/100;//取得图片文件的大小
ImgWidth=ImgObj.width //取得图片的宽度
ImgHeight=ImgObj.height; //取得图片的高度
FileMsg="\n图片大小:"+ImgWidth+"*"+ImgHeight+"px";
FileMsg=FileMsg+"\n图片文件大小:"+ImgFileSize+"Kb";
FileMsg=FileMsg+"\n图片文件扩展名:"+FileExt;
if(AllowImgWidth!=0&&AllowImgWidth<ImgWidth)
ErrMsg=ErrMsg+"\n图片宽度超过限制。请上传宽度小于"+AllowImgWidth+"px的文件，当前图片宽度为"+ImgWidth+"px";
if(AllowImgHeight!=0&&AllowImgHeight<ImgHeight)
ErrMsg=ErrMsg+"\n图片高度超过限制。请上传高度小于"+AllowImgHeight+"px的文件，当前图片高度为"+ImgHeight+"px";
if(AllowImgFileSize!=0&&AllowImgFileSize<ImgFileSize)
ErrMsg=ErrMsg+"\n图片文件大小超过限制。请上传小于"+AllowImgFileSize+"KB的文件，当前文件大小为"+ImgFileSize+"KB";
if(ErrMsg!="")
ShowMsg(ErrMsg,false);
else
ShowMsg(FileMsg,true);
}
ImgObj.onerror=function(){ErrMsg='\n图片格式不正确或者图片已损坏!'}
function ShowMsg(msg,tf) //显示提示信息 tf=true 显示文件信息 tf=false 显示错误信息 msg-信息内容
{
msg=msg.replace("\n","<li>");
msg=msg.replace(/\n/gi,"<li>");
if(!tf)
{
document.all.UploadButton.disabled=true;
FileObj.outerHTML=FileObj.outerHTML;
document.getElementById("preview").innerHTML=msg;
HasChecked=false;
}
else
{
document.all.UploadButton.disabled=false;
if(IsImg)
document.getElementById("preview").innerHTML="<img src='"+ImgObj.src+"' width='60' height='60'>"
else
// document.getElementById("preview").innerHTML="非图片文件";
document.getElementById("preview").innerHTML=msg;
HasChecked=true;
}
}
function CheckExt(obj)
{
ErrMsg="";
FileMsg="";
FileObj=obj;
IsImg=false;
HasChecked=false;
document.getElementById("preview").innerHTML="预览区";
if(obj.value=="")return false;
document.all.UploadButton.disabled=true;
FileExt=obj.value.substr(obj.value.lastIndexOf(".")).toLowerCase();
if(AllowExt!=0&&AllowExt.indexOf(FileExt+"|")==-1) //判断文件类型是否允许上传
{
ErrMsg="\n该文件类型不允许上传。请上传 "+AllowExt+" 类型的文件，当前文件类型为"+FileExt;
ShowMsg(ErrMsg,false);
return false;
}
if(AllImgExt.indexOf(FileExt+"|")!=-1) //如果图片文件，则进行图片信息处理
{
IsImg=true;
ImgObj.src=obj.value;
CheckProperty(obj);
return false;
}
else
{
FileMsg="\n文件扩展名:"+FileExt;
ShowMsg(FileMsg,true);
}
}
</script>
<form enctype="multipart/form-data" method="POST" onsubmit="return HasChecked;">
<fieldset style="width: 372; height: 60;padding:2px;">
<input type="file" id="file1" onchange="CheckExt(this)" style="width:180px;">
<input type="submit" id="UploadButton" value="开始上传" disabled><br>
<div id="preview" style="border:1 solid #808080;background:#E0E0E0;width100%;height:20px;color:#606060;padding:5px;" >
</div>
</fieldset>
❹ 怎样限制fileupload控件上传的文件大小 js
您好，我来为您解答：
这就是一个判断而已，放在你要调用的JS方法里面，执行的代码在下面的控件里面执行的。
if(document.all.imgx.fileSize>1024*1024)
{
alert('图片文件超过指定大小(1M)，请重新上传附件');
window.event.returnValue=false;
return false;
}
就是在选择附件之后将这个文件传给img 在到JS方法里面判断
<asp:FileUpload ID="FileUpload2" runat="server" Width="353px" onchange="document.all.imgx.src=this.value"/><img src="" id="imgx" style="display:none">
转载，仅供参考。
如果我的回答没能帮助您，请继续追问。
❺ jquery怎样限制上传图片的大小和像素宽高，分辨率
<scripttype="text/javascript">
functionvalidate_img(a){
varfile=a.value;
if(!/.(gif|jpg|jpeg|png|GIF|JPG|png)$/.test(file)){
alert("图片类型必须是.gif,jpeg,jpg,png中的一种");
returnfalse;
}else{
varimage=newImage();
image.src=file;
varheight=image.height;
varwidth=image.width;
varfilesize=image.filesize;
alert(height+"x.."+filesize);
if(width>80&&height>80&&filesize>102400){
alert('请上传80*80像素或者大小小于100k的图片');
returnfalse;
}
}
alert("图片通过");
}
</script>
图像:<inputtype="file"name="uploadImg"onchange="Javascript:validate_img(this);"size="12"/>
测试的时候放服务器上测试，本地不行的哈～
❻ 如何使用javascript限制文件上传大小
$("#ms_upload_file").change(function(){
//检验非空和文件大小
if($(this).val() !== '' && checkSize(this)) { //其他操作
}
});/**
* 函数：检查上传文件大小
* 输入：input的js对象
* 输出：
**/function checkSize(input) {
var Sys = {}; var flag; var filesize = 0; //判断浏览器种类
if (navigator.userAgent.indexOf("MSIE") > 0) {
Sys.ie=true;
} if (navigator.userAgent.indexOf("Firefox")>0) {
Sys.firefox=true;
} //获取文件大小
if (Sys.firefox) {
filesize = input.files[0].size;
} else if (Sys.ie){ var fileobject = new ActiveXObject ("Scripting.FileSystemObject");//获取上传文件的对象
var file = fileobject.GetFile (input.value);//获取上传的文件
filesize = file.Size;//文件大小
} //判断是否符合要求
if (filesize / (1024 * 1024) < 5 ) {
flag = true;
} else {
alert("附件过大，建议不要超过5M！");
flag = false;
} return flag;
}
❼ javascript上传图片限制大小为100KB
<script language="javascript">
function check(form1)
{
var img=document.createElement("img");
if(form1.images.value=="")
{
alert("图片上传不能为空，请选择上传的图片！")
form1.images.focus();
return false;
}
if (img.fileSize>102400)
{
alert("上传的图片不能大于100KB");
return false;
}
else
{
return true;
}
}
</script>
❽ js压缩图片 到固定像素以内，500k为例
本文旨在探究js压缩图片的两种方式： 改变图片长宽 ， 改变图片质量 ，和结合了以上两者的 最终方案 。
首先，阅读本文需要知道canvas的两个方法
这两个方法具体的说明可以在MDN上查看，关于图片压缩，也有很多现成的博客可以直接用。但是那些博客都有个问题，并没有关心之后图片的压缩质量。
我试着用一个现成的例子去跑了一下，一个1.7M的图片压缩到了23k，堪称像素级毁灭性破坏。
假如一张大图可能包含着很多文字等关键信息，必须上传之后使用方能清晰辨认。所以要压缩之后质量尽可能接近500k的。500k像素以内，就是若一张图宽度为1024，则高度不能超过500。因为图片有其他的信息，也是要占大小的。即不得大于 1024*500 。
所以，根据需求，上传图片不能超过500k的情况下尽可能保留图片的清晰度。当然如果可以的情况下用上面提到的 canvas.toDataURL 设置压缩程度为0.9，0.8试试看，图片质量可以接受，大小会有大幅度的缩小。
如果不压缩，靠调整图片长宽去控制上传大小呢？
原理很简单，就是靠不断地缩小限定的最大宽高，直到最终长宽的积小于规定的大小。
这种方法有可能最后得出的图片的大小会略大于规定大小，原因上文也提到过了，如果想使用这种方法，可自行再调整一下。
上面的方法有个问题，就是改变了图片的原始长宽。如果一个图的长宽足够大，压缩图片质量，糊一点但是内容看得清也是ok的嘛。所以，跟上面同理，我们可以不断调整图片的质量设定直到大小合适，那么，如何在图片上传之前知道图片的大小呢？
首先，需要知道的一点是，压缩之后拿到的base64字符串会转成blob对象，然后传给服务端。
可以查阅文档，blob对象有个属性是size
这个size就是上传之后实际的文件大小。
参照上面的思路，可以每次改变 canvas.toDataURL('image/' + fileType, level); level的值，去调整压缩图片质量，然后用blob对象的size去验证是否满足500k以内的需求。
关于 canvas.toDataURL 的level到底是怎么计算的，MDN文档里也没说，写了个循环一次减少0.1的level压缩了几个图片
用加减乘除算了一下，没找到规律，数学不好放弃了（这个东西好像也不是能观察出来的，看结果跟初始大小没啥关系）。
这里要注意的是，有可能遇到超大图片，0.1的level可能不足以压缩到500k，所以小于0.1的时候，改变level递减的差值继续压缩下去
在开始接收到图片的时候给一个loading增加用户的耐心好了，loading万岁~
其实单纯的压缩质量遇到稍大的图片，会导致页面高频计算，然后页面基本就用不了了- -。有尝试过用iphone的一个屏幕截图（10M左右），压的时候稍过一会，整个手机都在发烫，只能杀进程。
所以，若对长度没有特殊的限制，可以做一个缩放，去加快压缩的进度，提高能压缩的图片大小上限。
页面到了ios上还是不行- -，可以看到最后图片level为0.001，最长边为764。
问题还是循环次数还是过多，计算频率太高。从图中可看出，对于大图来说，初始设定的level和图片尺寸过于宽松，可以优化一下初始level和尺寸。
有的时候还会遇到一张图片无论如何也压不到500k，就是上一次和这次的压缩后大小没有变化，这种情况需要抛错，不让循环继续。
大图片的等待时间稍长，可以给用户先预览一个base64的图片增加等待耐心，方法名为 getImgBase64 ,这里都一并给出了
解决的隐患：上面这个方案会出现我需要一个500k的照片，压到了520k之后，再压了一次。有时候这最后的一次会特别夸张，直接将图片弄到了几十k。
参考了： https://github.com/WangYuLue/image-conversion
这个库里面有个方法 compressAccurately ,这个方法可以比较精准地压缩。偷偷翻了一下源码。
其实上一个方案的痛点就在于，如何在每一个压缩循环里处理尺寸和压缩比例。
总结
如有纰漏，欢迎指正
❾ asp js 页面中上传文件限制更改（30分）
最简单的方法：
400KB的话就将你贴的代码的第三行的1024改成256就行了。
不限制的话就将nAllowSize*1024改成1024，前面的nAllowSize*删掉。