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

收藏
0 93
SuperMan   ❀
SuperMan ❀ 2018-09-03 13:52:39
付费话题:10 积分
ITKEE社区V3.0.1版本更新,补丁包下载了解详情 , 获取ITKEE社区版本,快速授权了解详情

实现效果图,LIKE THIS

GIF.gif

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


    
    
    
        上传文件
    

JS

/**
 * 文件上传
 */
$('input:file[name=UploadsFile]').change(function(e){
    var callback = $(this).attr('callback');
    //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){
                $("#"+callback).val(data.url);
            }else{
                showmsg('上传失败');
            }
        },
        error: function (data) {
            console.log(data);
        }
    })
});

后端代码不做展示 

评论话题
提交
话题分类