jquery获取图片的大小、宽度、高度以及上传图片到服务器

最新推荐文章于 2024-08-27 04:41:20 发布

时间飞逝子非鱼

最新推荐文章于 2024-08-27 04:41:20 发布

阅读量2.3k

点赞数

分类专栏： Jquery

本文链接：https://blog.csdn.net/lgysjfs/article/details/85229545

版权

本文介绍了使用jQuery获取图片大小、宽度和高度的步骤：创建form表单存储file信息，判断图片大小，将file转为base64并获取图片宽高，最后通过ajax将图片数据发送到服务器。

摘要由CSDN通过智能技术生成

获取图片信息和上传图片的步骤：

1、new 一个 form 表单信息，用于存放input选择的file文件信息

2、通过 file 的信息判断图片的大小

3、把 file 图片转化成base64的格式，赋值给 new 的图片，等图片加载完就可以获取图片的宽高等信息了

4、把 form 表单存放的file文件信息，通过 ajax 请求传给后端进行处理

<input type="file" name="选择图片" id="fileinput" onchange="getimg()">
function getimg(){
    let formdata = new FormData();
    // 获取input选择的文件信息
    let file = $("#fileinput")[0].files[0];
    if(file.size > 3*1024*1024){
        console.log("上传图片不能大于3M");
        return;
    }
    formdata.append('file',file);
    //读取图片数据
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function (e) {
        let data = e.target.result;
        //加载图片获取图片真实宽度和高度
        let image = new Image();
        imag