300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > input做图片上传限制图片大小1M以内

input做图片上传限制图片大小1M以内

时间:2022-12-15 18:43:51

相关推荐

input做图片上传限制图片大小1M以内

input 属性type=file;定义输入字段和 "浏览"按钮,供文件上传。

1、做图片上传可配合中使用 accept 属性来限制图片的格式。

注意 accept 属性只能与 配合使用。

<input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" onchange="upLoad('pic')"/>

本例中的输入字段可以接受 GIF 和 JPEG 两种图像.

如果不限制图像的格式,可以写为:accept=“image/*”。

name 和id 是必须要写的。

2、获得input type=“file” 选择的文件大小、文件名称、上次修改时间、类型等信息(*多个文件会存储在files数组中)这里是引入ajaxfileupload.js配合完成的;

function upLoad(id) {var f = document.getElementById(id).files; //上次修改时间 console.log(f[0].lastModifiedDate); //名称 console.log(f[0].name); //类型 console.log(f[0].type);//大小 字节 console.log(f[0].size);//这里做图片大小限制 if(f[0].size/1024>1024){alert('上传图片不能大于1M');return;}$.ajaxFileUpload({//上传图片的地址配合后提供的接口url: 'index.php?c=do&a='',type: 'post',secureuri: false, //一般设置为false// fileElementId上传文件的id、name属性名fileElementId: id, //返回值类型,一般设置为json、application/jsondataType: 'json', async: false,success: function(data, status){//上传成功函数返回的是图片在服务器上的路径url可以直接访问if( data && data.result == 0 ){console.log(data.url)}},error: function(data, status, e){alert('上传失败');}}); }

也可以根据图片的后缀进行文件类型的判断,js如下

var type=(src.substr(src.lastIndexOf("."))).toLowerCase();if(type!=".jpg"&&type!=".gif"&&type!=".jpeg"&& type!=".png"){alert("您上传图片的类型不符合(.jpg|.jpeg|.gif|.png)!");}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。