PHP+webupload身份证正面反面图片上传实例

PHP+webupload实现身份证正面反面图片上传实例,其实原理很简单,就是固定上传两张图片,具体看下面的源代码

自定义两个上传按钮

<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', 
}

本实例下载:https://www.sucaihuo.com/php/954.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值