webupload上传身份证正面和反面【原创

来源:https://www.sucaihuo.com/js/954.html 2016-10-06 22:16浏览(10096) 收藏

PHP结合webupload实现的上传身份证正面和反面功能,webuploader上传插件很多网站都在用的
webupload上传身份证正面和反面
分类:PHP > 上传 难易:中级
下载资源 下载积分: 210 积分

自定义两个上传按钮

<div class="upload-image-list clearfix">
    <div class="fileinput-button js-add-image"onclick="addWebuploadCurrent($(this))">
        <span class="cover_words">正面</span>
        <div class="webuploader-pick">
            <a class="fileinput-button-icon" href="javascript:;"></a>
        </div>
    </div>
    <div class="fileinput-button js-add-image"onclick="addWebuploadCurrent($(this))" style="float:right">
        <span class="cover_words">反面</span>
        <div class="webuploader-pick">
            <a class="fileinput-button-icon" href="javascript:;"></a>
        </div>
    </div>
</div>

webuploader多文件自定义上传

function webupload_pic() {
    var maxsize = 5000;
    $.getScript("./Public/js/plugins/webuploader/webuploader.js", function() {
        if (!WebUploader.Uploader.support()) {
            alert('您的浏览器不支持上传功能!如果你使用的是IE浏览器,请尝试升级 flash 播放器');
        }
        var uploader = WebUploader.create({
            multiple: false,
            auto: true,
            swf: "./Public/js/plugins/webuploader/Uploader.swf",
            server: "ajax.php",
            pick: {
                id: '.js-add-image',
                innerHTML: ''
            },
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,png',
                mimeTypes: 'image/*'
            },
            fileSingleSizeLimit: maxsize * 1024 * 1024,
            duplicate: true,
            formData: {
                code: 'identity',
            }

        });
        //上传时
        uploader.on('fileQueued', function(file) {
            var item_progress = "<div class='progress' id='" + file['id'] + "'><span class='bar'></span><span class='percent'>0%</span></div></li>";
            $(".webupload_current").prepend(item_progress);

        });
        //上传中
        uploader.on('uploadProgress', function(file, percentage) {
            var percent = parseFloat(percentage * 100);
            $("#" + file.id).find('.bar').css({"width": percent + "%"});
            $("#" + file.id).find(".percent").text(percent + "%");

        });

        uploader.on('uploadBeforeSend', function(block, data) {
            data.maxsize = maxsize;
        });
        //上传成功后
        uploader.on('uploadSuccess', function(file, response) {
            $("#" + file.id).remove();
            $(".webupload_current").prepend("<img class='img_common' src=" + "./" + response.pic + " data-pic=" + response.pic + " alt='身份证照片'/>")
        });

        uploader.on('uploadError', function(file, reason) {
            alert("上传失败!请重试。");
        });
    });
}

webuploader传参数

formData: {
   code: 'identity',
}
声明:本文为原创文章,如需转载,请注明来源sucaihuo.com并保留原文链接:https://www.sucaihuo.com/js/954.html
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2