请问，jq上传图片到服务端怎么弄，而且能在网页预览图片

Question

请问，jq上传图片到服务端怎么弄，而且能在网页预览图片，有没有例子能看一下

Answer 1

曾经写过的一个方法，看能不能用，有些es6的语法可以抽掉。

let uploadImg = () => { 
    let filechooser = $('.filechooser'); //点击上传的容器，因为我这里多个
    // 200 KB 对应的字节数
    const maxsize = 200 * 1024;
    filechooser.each(function(i, item){
        $(item).on('change',function(){ //调用change方法
            let file = this.files[0];
            let _this = this;

            // 接受 jpeg, jpg, png 类型的图片
            if (!/\/(?:jpeg|jpg|png)/i.test(file.type)) return;

            var reader = new FileReader();
            reader.onload = function() {
                var result = this.result;
                //License = result;
                var img = new Image();

                // 如果图片小于 200kb，不压缩
                if (result.length <= maxsize) {
                    toPreviewer(_this,result,i);
                    return;
                }

                img.onload = function() {
                    var compressedDataUrl = compress(img, file.type);
                    //License_back = compressedDataUrl;
                    toPreviewer(_this,compressedDataUrl,i);
                    img = null;
                };

                img.src = result;
            };

            reader.readAsDataURL(file);
            
            
        });
    });
    
    //预览
    let toPreviewer = (_this,dataUrl,i) => {
        console.log(dataUrl); 
    };


    let compress = (img, fileType) => {
        var canvas = document.createElement("canvas");
        var ctx = canvas.getContext('2d');

        var width = img.width;
        var height = img.height;

        canvas.width = width;
        canvas.height = height;

        ctx.fillStyle = "#fff";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(img, 0, 0, width, height);

        // 压缩
        var base64data = canvas.toDataURL(fileType, 0.75);
        canvas = ctx = null;

        return base64data;
    };

};

export default uploadImg;

Answer 2

URL.createObjectURL实现预览，用formdata上传，具体请参考我的博客链接

Answer 3

上传图片，用<input type=file /> 表单上传嘛
至于图片预览，要用fileReader
例子：

$("input[type=file]").onchange(function(file){
    if(file.files&&fife.files[0]){
        var img=document.getElementById("img");
        var reader = new FileReader();
        reader.onload = function (evt) { img.src = evt.target.result; }
        reader.readAsDataURL(file.files[0]);
    }
});