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

    技术2022-07-11  147

    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/json dataType: '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)!"); }
    Processed: 0.009, SQL: 9