html上传图片

方案一

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    
html>
    
head>
    
    title>
    头像/title>
    
/head>
    

script src="http://i.gtimg.cn/qzone/biz/gdt/lib/jquery/jquery-2.1.4.js?max_age=31536000">
    /script>
    

script src="js/avator.js">
    /script>
    

body>
    
input type="file" id="upLoad" name="image">
    
!-- 显示上传之后的图片 -->
    
div id='previewImg'>
    
    img src="" id='viewImg' style="height: 200px;
    "/>
    
/div>
    
button id="submit">
    提交/button>
    

/body>
    
/html>

$(function () {

    var imgsrc = ''

    $("#submit").click(function () {
    
        alert(imgsrc);

        $.ajax({

            url: '/avatar',
            type: 'POST',
            dataType: 'json',
            data: {

                'imgsrc': imgsrc
            }
,
            success: function (res) {
    
                alert('666');

            }
,
            error: function () {
    
                alert('123');

            }

        }
    );


    }
    );



    $('#upLoad').on('change', function () {
    
        var filePath = $(this).val(),         //获取到input的value，里面是文件的路径
            fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase(),
            imgBase64 = '',      //存储图片的imgBase64
            fileObj = document.getElementById('upLoad').files[0];
 //上传文件的对象,要这样写才行，用jquery写法获取不到对象

        // 检查是否是图片
        if (!fileFormat.match(/.png|.jpg|.jpeg/)) {
    
            alert('上传错误,文件格式必须为：png/jpg/jpeg');
    
            return;

        }
    

        alert(fileObj.size / 1024);
    
        if (fileObj.size / 1024 >
 20000) {
    
            // alert('大于200k');

            // 调用函数，对图片进行压缩
            compress(fileObj, function (imgBase64) {
    
                imgBase64 = imgBase64;
        //存储转换的base64编码
                imgsrc = imgBase64;
    
                $('#viewImg').attr('src', imgBase64);
 //显示预览图片
            }
    );

        }
 else {
    
            // alert('小于200k');

            // 调用函数，不对图片进行压缩
            directTurnIntoBase64(fileObj, function (imgBase64) {
    
                imgBase64 = imgBase64;
        //存储转换的base64编码
                imgsrc = imgBase64;
    
                $('#viewImg').attr('src', imgBase64);
 //显示预览图片
            }
    );

        }

    }
    );


    // 不对图片进行压缩，直接转成base64
    function directTurnIntoBase64(fileObj, callback) {
    
        var r = new FileReader();

        // 转成base64
        r.onload = function () {
    
            //变成字符串
            imgBase64 = r.result;
    
            console.log(imgBase64);
    
            callback(imgBase64);

        }
    
        r.readAsDataURL(fileObj);
    //转成Base64格式
    }


    // 对图片进行压缩
    function compress(fileObj, callback) {

        if (typeof (FileReader) === 'undefined') {
    
            console.log("当前浏览器内核不支持base64图标压缩");
    
            //调用上传方式不压缩
            directTurnIntoBase64(fileObj, callback);

        }
 else {

            try {
    
                var reader = new FileReader();

                reader.onload = function (e) {
    
                    var image = $('img/>
    ');

                    image.load(function () {
    
                        square = 390,   //定义画布的大小，也就是图片压缩之后的像素
                            canvas = document.createElement('canvas'),
                            context = canvas.getContext('2d'),
                            imageWidth = 0,    //压缩图片的大小
                            imageHeight = 0,
                            offsetX = 0,
                            offsetY = 0,
                            data = '';
    

                        canvas.width = square;
    
                        canvas.height = square;
    
                        context.clearRect(0, 0, square, square);
    

                        if (this.width >
 this.height) {
    
                            imageWidth = Math.round(square * this.width / this.height);
    
                            imageHeight = square;
    
                            offsetX = -Math.round((imageWidth - square) / 2);

                        }
 else {
    
                            imageHeight = Math.round(square * this.height / this.width);
    
                            imageWidth = square;
    
                            offsetY = -Math.round((imageHeight - square) / 2);

                        }
    
                        context.drawImage(this, offsetX, offsetY, imageWidth, imageHeight);
    
                        var data = canvas.toDataURL('image/jpeg');
    
                        //压缩完成执行回调
                        callback(data);

                    }
    );
    
                    image.attr('src', e.target.result);

                }
    ;
    
                reader.readAsDataURL(fileObj);

            }
 catch (e) {
    
                console.log("压缩失败!");
    
                //调用直接上传方式  不压缩
                directTurnIntoBase64(fileObj, callback);

            }

        }

    }

}
    );
    

方案2

!doctype html>
    
html lang="en">
    
head>
    
  meta charset="UTF-8">
    
  title>
    Document/title>
    
/head>
    
body>
    
input type="file">
    br>
    
img src="" height="200" alt="Image preview area..." title="preview-img">
    
script>
    
  var fileInput = document.querySelector('input[type=file]'),
          previewImg = document.querySelector('img');

  fileInput.addEventListener('change', function () {
    
      var file = this.files[0];
    
      var reader = new FileReader();

      // 监听reader对象的的onload事件，当图片加载完成时，把base64编码賦值给预览图片
      reader.addEventListener("load", function () {
    
          previewImg.src = reader.result;

      }
    , false);
    
      // 调用reader.readAsDataURL()方法，把图片转成base64
      reader.readAsDataURL(file);

  }
    , false);
    
/script>
    
/body>
    
/html>
    

参考：

https://www.cnblogs.com/xh_Blog/p/8269581.html

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！