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)!");}