博客列表 >PHP+webupload实现身份-证正面反面图片上传功能

PHP+webupload实现身份-证正面反面图片上传功能

alber1986的博客
alber1986的博客原创
2019年03月08日 18:41:44860浏览

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

222222.png

自定义两个上传按钮

<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

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议