js实现自定义图片上传组件

简介：js通过模拟点击input获取本地文件，再通过form-data上传图片到服务器

不论是管理后台还是其他H5页面开发，我们都会遇到图片上传的功能需求。虽然现在已经有很多ui框架可以使用，但是总有一些ui设计师设计一些奇奇怪怪的ui，因此需要我们自己去编写上传组件。

ui界面我们不做过多的讲解，先在看看js相关部分代码吧？js相关代码可分为两个部分，第一部分就是模拟点击file类型的input获取图片，第二部分就是图片上传服务器相关代码。

具体实现代码如下所示：

1.模拟点击input获取本地文件

function simulationUploadClick(callback){
    var input = document.createElement('input');
    input.type = 'file';

    // 如果是多图上传，打开下方设置即可
    // input.multiple = 'multiple';
    input.accept = 'image/*';
    input.style.display = 'none';
    document.body.append(input);
    input.addEventListener('change',function (e) {
        document.body.removeChild(input);
        callback(this.files[0]);
    });
    input.click();
}

2.使用FormData上传图片，我们以jQuery为例，代码如下：

//上传图片
function uploadImg(file,callback){
    var form_data = new FormData();
    form_data.append('file',file);
    //添加额外字段
    form_data.append('type',1);
    $.ajax({
        url: '/ImageTool/compress',
        type: 'POST',
        data: form_data,
        processData:false,
        contentType:false,
        success:function (res) {
            callback(res);
        }
    });
}

完成了上述两步的封装，我们就可以在其他地方通过函数的方式实现图片上传了

//模拟点击获取图片
simulationUploadClick(function (file){
    //上传图片到服务器
    uploadImg(file,function (res) {
        console.log('上传图片的结果',res);
    });
});

至于样式，大家可以根据UI设计编写，只需要在点击事件中调用上面的两个方式就可以实现图片上传了

 

有遗漏或者不对的可以在我的公众号留言哦