Blogger Information
Blog 14
fans 0
comment 0
visits 12054
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
PHP+webupload实现身份-证正面反面图片上传功能
alber1986的博客
Original
865 people have browsed it

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

Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post