写在前面的话：
判断是否符合大小，上传文件。最初是使用插件webuploader来做的，但是因为其初始化的关系，点击区域始终为1px*1px，refresh之后也不能解决我的问题，所以，试了下下边的方法：
FormData()：相关资料
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/jquery/3.2.0/jquery.min.js"></script> </head> <body> <style> .imgs { margin: 60px auto; border: 1px solid red; }
</style> <div class="box"> <label for="files" class="btn btn-info">选择文件</label> <!-- label的for属性与input:file的id属性关联起来时, 当label被点击的时候, input对象也会获取焦点, 弹出文件选择窗口 --> <input type="file" name="name" id="files" style="display: none"> <div class="imgs"> </div> <!-- 存放预览图片 --> </div> <script> $('#files').change(function() { // 这里绑定的是input:file 对象的change事件 是你的实际情况绑定对应的事件 var a = new FormData(); // 向后台发送文件 使用 FormData 对象 包裹文件 a.append('Cander', this.files[0])
// 这里的this是 input:file 对象 它的files属性就是用户选择的文件 它是一个数组, 可以选择多个文件 // 这里我们只选择一个 就取数组中的第一个文件 console.log(this.files[0]) // 在向后台上传之前可先判断一下图片的大小，如果符合条件就上传： var max_size = 100000002; var max_width = 1000; var max_height = 800; // 先判断大小 if (this.files[0].size <= max_size) { var image = new Image(); image.src = getObjectURL(this.files[0]); image.onload = function() { console.log(image.width) console.log(image.height) if (image.width <= max_width && image.height <= max_height) { // 上传至后台 $.ajax({ type: 'POST', processData: false, // 发送文件时这两个选项要关闭 contentType: false, // 发送文件时这两个选项要关闭 url: 'your url', data: a, // 这里向服务器发送的对象就是承载了文件的form对象 success: function(s) { console.log(s) if (s.code === 0) { var b = $('.imgs').html() $('.imgs').html(b + '<img src="' + s.url + '">') } }, error: function(f) { console.log(f) } }) } } }else{ } });
// 获取图片路径函数 function getObjectURL(file) { var url = null; if (window.createObjcectURL != undefined) { url = window.createOjcectURL(file); } else if (window.URL != undefined) { url = window.URL.createObjectURL(file); } else if (window.webkitURL != undefined) { url = window.webkitURL.createObjectURL(file); } return url; } </script> </body> </html>
console.log(this.files[0]) 的结果：
注： 文中 ‘获取图片路径函数’来自于 https://segmentfault.com/q/1010000011739866?sort=created