美文网首页
FileReader循环上传图片到七牛

FileReader循环上传图片到七牛

作者: IT行者q | 来源:发表于2020-12-31 20:35 被阅读0次
    function uploadImg(event) {
        var length = 0;
    
        var e=window.event||event;
        var that = e.target;
    
        var serial = $(that).attr('data-serial');
        var id = $('meta[name=order_id]').attr('content');
        var order_status = $('meta[name=order_status]').attr('content');
    
        $(that).attr('value','');
        // 获取当前选中的文件
        var length = e.target.files.length;
    
        console.log(length);
    
        // 判断文件的数量
        if(length > 30){
            alert("单次文件上传数量不能大于30张!");
            return;
        }
    
        // 判断文件的尺寸
        for (var i=0 ;i< length; i++) {
            var file = e.target.files[i];
            if(file.size > 10*1024 * 1024){
                alert("文件尺寸不能大于10M");
                return;
            }
        }
        //需要上传的图片内容 base64格式
        var imgStr = '';
        //七牛云平台 配置的域名
        // var urlHeader = "http://qiniu.yunyidai.net/";
        //获取七牛的token
        var qiniuParams = {
            url: '/admin/common/qiniu/upload/token',
            type: 'get',
            data: {},
            header: {},
            async: false,
            callback: function(res){
                qiniutoken = res.data;
            }
        };
        ajaxRequest(qiniuParams);
        // 追加到from对象
        for (var i=0 ;i< length; i++) {
            var file = e.target.files[i];
            var prifix = file.name.split('.')[1];
            //文件后缀
            // console.log(file);
            //七牛云图片base64格式上传地址
            // document.write(uploadUrl);
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function(ev) {
                var uploadUrl = "https://upload.qiniup.com/putb64/-1/key/" + window.btoa("customer_"+ parseInt(Math.random()*9999999) + new Date().getTime()+"_"+parseInt(Math.random()*9999999) + '.' + prifix);
    
                //获取到base64格式的图片
                var imgStr = ev.target.result.split(',')[1];
                // console.log(imgStr)
                $.ajax({
                    headers: {
                        'Authorization' : "UpToken " + qiniutoken
                    },
                    url: uploadUrl,
                    type: 'POST',
                    data: imgStr,
                    async: false,
                    success: function (res) {
                        var file_path = qiniuhost + '/' + res.key;
                        $.ajax({
                            headers: {
                                'X-CSRF-TOKEN': csrf_token
                            },
                            url: '/admin/customer/document/upload',
                            type: 'post',
                            async: false,
                            data:{
                                id: id,
                                serial: serial,
                                order_status: order_status,
                                file_path: file_path,
                            },
                            success: function (res){
                                var html = '';
                                html += '<div style="margin-left: 5px;" class="customer_detail_file_size serialid_'+serial + '">';
                                html += '<div><img src="'+ file_path +'" alt=""></div>';
                                html += '<div><span data-file_path="'+ file_path +'" class="customer_detail_file_del">删除</span></div>';
                                html += '</div>';
    
                                $('.serialid_'+serial).last().after(html);
    
                            },
                            error: function (res) {
                                parent.layer.msg('网络异常', {time: 1000});
                            }
                        });
                    }
                });
            }
            // reader.abort();
            sleep(100);
        }
    }
    

    相关文章

      网友评论

          本文标题:FileReader循环上传图片到七牛

          本文链接:https://www.haomeiwen.com/subject/bsbroktx.html