最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

webupload上传身份证正面和反面

来源:http://www.erdangjiade.com/ 沐浴春风 2016-10-06 22:16浏览(3524)

本文的demo是参照二当家的的上传js特效http://www.erdangjiade.com/uploads/js,其中自定义上传图标就是通过webuploader上传实现。

0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。在线 充值

webupload上传身份证正面和反面
分类:PHP > 上传 难易:中级
查看演示 下载资源 下载积分: 100 积分

自定义两个上传按钮

<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'
}
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/954.html
评论10
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

  • 头像 9楼
    05-06 23:52
    pengtao0425
    看看啦。。。。觉得还不错的 啊<br />4444
  • 头像 8楼
    05-06 23:51
    pengtao0425
    看看啦。。。。觉得还不错的 啊<br />
  • 头像 7楼
    06-11 19:40
    ngu137
    看看啦。。。。觉得还不错的 啊
  • 头像 6楼
    04-06 14:48
    654321
    这个 演示很好!!!实用了!!!
  • 头像 5楼
    12-08 08:25
    ngu137
    这个演示有点问题吧。。
  • 头像 4楼
    05-20 18:44
    天霸tua
    项目需要,谢谢~
  • 头像 3楼
    05-17 14:07
    cz521000
    正需要,先看看
  • 头像 板凳
    05-15 13:33
    123456温柔
    正需要呢,不错呢
  • 头像 椅子
    05-15 13:31
    123456温柔
    正需要呢,不错啊
  • 头像 沙发
    02-07 12:55
    geshi
    正需要呢,不错
1 2