input为file上传文件

• 1、去除input类型为file上传文件时默认样式和默认”选择文件”等；
• 2、压缩要上传的图片
• 3、隐藏上传按钮, 手动触发

实现思路

隐藏选择图片的input, 点击显示图片触发input的onchange事件

// xxx.html
<img id="pic" src="./images/xxx.png">
<form id="uploadForm"  action="" method="post" enctype="multipart/form-data">
    <input type="file" name="file" id="file" accept="image/*" onchange="showPic(this)" style="visibility:hidden;position:absolute;top:0px;width:0px" />
    <input type="button" value="upload" id="upload" style="visibility:hidden;position:absolute;top:0px;width:0px"/>
</form>

js代码

// 点击图片触发input的onchange事件
$('#pic').click(function() {
        $('#file').click();
})

function showPic(source) {
    var file = source.files[0];
    if (window.FileReader) {
        var fr = new FileReader();
        fr.onloadend = function(e) {
                // submit提交
                $('#upload').click();
                 document.getElementById("pic").src = e.target.result;
                 // 压缩图片
                 // cutImageBase64(e.target.result, 300, 0.5);
        };
        fr.readAsDataURL(file);
    }
}

压缩图片

cutImageBase64函数

function cutImageBase64(imgSrc,wid,quality) { //压缩上上传图片
        var img = new Image();
        img.src = imgSrc;
        img.onload = function() {
            var that = this;

            //生成比例
            var w = that.width,
                h = that.height,
                scale = w / h;
                w = wid || w;
                h = w / scale;

            //生成canvas
            var canvas = document.createElement('canvas');
            var ctx = canvas.getContext('2d');
            $(canvas).attr({ width: w, height: h });
            ctx.drawImage(that, 0, 0, w, h);

            // 生成base64
            base64 = canvas.toDataURL('image/jpeg', quality || 0.6);
            // $('#pic').attr('src',base64); // 显示压缩后的图片
    };
}

动态更改form表单提交

var formData = new FormData(document.getElementById('registerForm'));
formData.append("name", '12222'); 
formData.append("file", convertBase64UrlToBlob(fileImg)); // fileImg是图片的base64字符串

base64图片转file文件提交

将剪切后的base64图片转成file文件提交，

/**
         * 将以base64的图片url数据转换为Blob
         * @param urlData
         *            用url方式表示的base64图片数据
         */
        function convertBase64UrlToBlob(urlData){

            var bytes=window.atob(urlData.split(',')[1]);        //去掉url的头，并转换为byte

            //处理异常,将ascii码小于0的转换为大于0
            var ab = new ArrayBuffer(bytes.length);
            var ia = new Uint8Array(ab);
            for (var i = 0; i < bytes.length; i++) {
                ia[i] = bytes.charCodeAt(i);
            }

            return new Blob( [ab] , {type : 'image/png'});
        }