纯js实现图片异步上传功能

实现效果图，LIKE THIS

HTML

            上传图片

JS

$(".btn-uploads").live('click',function () {
    var call_back = $(this).attr('callback');
    var input_file = '';
    $(this).parent().append(input_file);
    var ie = !-[1,];
    if(ie){
        $('input:file[name='+call_back+']').trigger('click').trigger('change');
    }else{
        $('input:file[name='+call_back+']').trigger('click');
    }
    $('input:file[name='+call_back+']').change(function(e){
        //dosomthing
        var file = e.target.files[0] || e.dataTransfer.files[0];
        var formData = new FormData();
        formData.append('file', file);
        $.ajax({
            url:"/api/upload/upload", //后端图片上传接口
            type:"post",
            data:formData,
            contentType: false,
            processData: false,
            mimeType: "multipart/form-data",
            dataType:"json",
            success: function (data) {
                if(data.error == 0){
                    $("#"+call_back).val(data.url);
                }else{
                    showmsg('上传失败');
                }
            },
            error: function (data) {
                console.log(data);
            }
        })
    });
});

上述实例代码中仅包括前端代码，后端图片上传代码自行实现。根据返回值在callback内实现对应的响应操作即可

以下实现方式，可以兼容手机端，微信浏览器图片上传

HTML

    
    
    
        上传文件