图片上传之webuploader和qiniuUploader

最新推荐文章于 2025-01-06 20:38:30 发布

原创最新推荐文章于 2025-01-06 20:38:30 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了身份证上传的过程，包括手持、正反面的单独上传，使用了WebUploader组件进行图片上传，并展示了上传后的图片展示效果。

1、身份证上传（包括手持、正反面，即不同的上传按钮，单次上传一张图片）
jade上传文件部分代码

.form-group.required.identify
   label(for="identityPhotos") 证件照片：
    .img-btn-wrap
        .img-btn.img-btn1
            img(src="./img/review/review_img1.png", alt="")
            .add-btn#add-btn0
                .add
                span 手持证件照
        .img-btn.img-btn2
            img(src="./img/review/review_img2.png", alt="")
            .add-btn#add-btn1
                .add
                span 身份证正面
        .img-btn.img-btn2.img-btn3
            img(src="./img/review/review_img3.png", alt="")
            .add-btn#add-btn2
                .add
                span 身份证背面
    .error-msg.warning.hide.img-error 请上传证件照片

jade文件html显示样式：
在这里插入图片描述
上传图片后显示的样式：

使用webUploader

var $list = $('.img-btn'),
        identityPhotosArr = ['','',''],
        imgDomain = 'http://img.saihuitong.com/';
        
        $list.each(function(index){
            var uploader = []; //定义uploader对象
            uploader[index] = WebUploader.create({
                server: '/upload/image',
                pick: '#add-btn' + index,
                fileSingleSizeLimit: 1024*1024*30,
                swf: '../webuploader/Uploader.swf', // swf文件路径
                auto: true,
                duplicate: true,
                multiple:false, //是否可同时选择多个
                accept: {
                    extensions: 'gif,jpg,jpeg,bmp,png',
                    mimeTypes: 'image/*'
                }
            });
        
            uploader[index].on('uploadBeforeSend', function(o, data, headers){
                data.imageType = 'sasReview';
            }); //添加自定义uploader参数（在create里面添加是没用的，不会调用）

            uploader[index].on('uploadSuccess', function(file, res) { //上传成功之后的回调
                if (res.code == 200) {
                    var imgSrc = res.result[0];
                    identityPhotosArr.splice(index, 1, imgSrc);
                    removeInputErrorMsg($('.identify .img-btn-wrap'));
                
                   //图片上传成功之后将图片src代替为默认图片
                    var $imgBtn = $('.img-btn').eq(index);
                    $imgBtn.addClass('no-border').find('img').attr({
                        'src': imgSrc,
                        'class': 'uploaded'
                    }).end().find('.add-btn').addClass('hide');

                } else {
                    alert(res.result);
                }
            })
        });

使用七牛云上传

   var $list = $('.img-btn'),
        identityPhotosArr = ['','',''],
        imgDomain = 'http://img.saihuitong.com/';
    $list.each(function(index){
        var uploader = [];
        uploader[index] = Qiniu.uploader({
            runtimes: 'html5,flash,html4',
            browse_button: 'add-btn' + index,
            chunk_size: '4mb',
            max_file_size: '30mb',
            flash_swf_url: '/assets/flash/moxie.swf',
            domain: imgDomain,
            multi_selection: false,  // 禁用多选 
            uptoken_url: '/rest/upload/img/token',
            auto_start: true,
            get_new_uptoken: true,
            filters: {
                mime_types : "",
                max_file_size: "30mb",
                prevent_duplicates: true
            },
            init: {
                FilesAdded: function(up, files) {},
                FileUploaded: function(up, file, info) {
                    var result = JSON.parse(info);
                    var imgSrc = imgDomain + result.key;  
                    identityPhotosArr.splice(index, 1, imgSrc);
                    removeInputErrorMsg($('.identify .img-btn-wrap'));
                    
                    var $imgBtn = $('.img-btn').eq(index);
                    $imgBtn.addClass('no-border').find('img').attr({
                        'src': imgSrc,
                        'class': 'uploaded'
                    }).end().find('.add-btn').addClass('hide');

                },
                Error: function(up, err, errTip) {
                    alert(errTip);
                }
            }
        })
    })