博主信息
博文 14
粉丝 0
评论 0
访问量 14452
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
PHP+webupload实现身份-证正面反面图片上传功能
alber1986的博客
原创
1215人浏览过

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举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学