最新赞助活动温馨提示:9.9元终身VIP,学生和没有工作的整站资源免费下载!
头像

plupload仿新浪微博多图片上传兼容IE

来源:http://www.erdangjiade.com/ 二当家的 2016-06-02 00:21浏览(3308)

1、请不要问“在不在”之类的问题,有问题直接问!2、学生或暂时没有工作的童鞋,整站资源免费下载!3、¥9.9充值终身VIP会员,整站资源无任何限制下载!5、程序员加油,交流群:782128964 在线 充值

plupload仿新浪微博多图片上传兼容IE
分类:PHP > 上传 难易:中级
查看演示 下载资源: 378

关注微信号获取此Demo视频教程:

下载资源 下载积分: 30 积分

上传html代码

<div class="photo_upload_box_outside blur_area" id="photo_upload_box_outside" tabindex="2000">
    <div class="photo_upload_box">
        <a class="photo_upload_close"href="javascript:void(0);"onclick="photo_upload_close()"></a>
        <h1>本地上传</h1>
        <p class="upload_num">共<span id="uploaded_length">0</span>张,还能上传<span id="upload_other">9</span>张</p>
        <ul id="ul_pics" class="ul_pics clearfix">
            <li id="local_upload"><img src="images/local_upload.png" id="btn2"/></li>
        </ul>
        <div class="arrow_layer">
            <span class="arrow_top_area"><i class="arrow_top_bg"></i><em class="arrow_top"></em></span>
        </div>
    </div>
</div>
var upload_total = 9;//最多上传数量
var uploader = new plupload.Uploader({//创建实例的构造方法
    runtimes: 'gears,html5,html4,silverlight,flash', //上传插件初始化选用那种方式的优先级顺序
    browse_button: ['btn', 'btn2'], // 上传按钮
    url: "ajax.php", //远程上传地址
    flash_swf_url: 'plupload/Moxie.swf', //flash文件地址
    silverlight_xap_url: 'plupload/Moxie.xap', //silverlight文件地址
    filters: {
        max_file_size: '10mb', //最大上传文件大小(格式100b, 10kb, 10mb, 1gb)
        mime_types: [//允许文件上传类型
            {title: "files", extensions: "jpg,png,gif,jpeg"}
        ]
    },
    multi_selection: true, //true:ctrl多文件上传, false 单文件上传
    init: {
        FilesAdded: function(up, files) { //文件上传前
            var length_has_upload = $("#ul_pics").children("li").length;
            if (files.length >= upload_total) { //超过上传总数量则隐藏
                $("#local_upload").hide();
            }
            var li = '';
            plupload.each(files, function(file) { //遍历文件
                if (length_has_upload <= upload_total) {
                    li += "<li class='li_upload' id='" + file['id'] + "'><div class='progress'><span class='bar'></span><span class='percent'>0%</span></div></li>";
                }
                length_has_upload++;
            });
            $("#ul_pics").prepend(li);
            uploader.start();
        },
        UploadProgress: function(up, file) { //上传中,显示进度条
            var percent = file.percent;
            $("#" + file.id).find('.bar').css({"width": percent + "%"});
            $("#" + file.id).find(".percent").text(percent + "%");
        },
        FileUploaded: function(up, file, info) { //文件上传成功的时候触发
            showPhotoUploadBox($('#btn'));
            var uploaded_length = $(".img_common").length;
            if (uploaded_length <= upload_total) {
                var data = eval("(" + info.response + ")");//解析返回的json数据
                $("#" + file.id).html("<input type='hidden'name='pic[]' value='" + data.pic + "'/><input type='hidden'name='pic_name[]' value='" + data.name + "'/>\n\
                <img class='img_common' src='" + data.pic + "'/><span class='picbg'></span><a class='pic_close' onclick=delPic('" + data.pic + "','" + file.id + "')></a>");
            }
            showUploadBtn();
        },
        Error: function(up, err) { //上传出错的时候触发
            alert(err.message);
        }
    }
});
uploader.init();

function delPic(pic, file_id) { //删除图片 参数1图片路径  参数2 随机数
    $.post("del.php", {pic: pic}, function(data) {
        $("#" + file_id).remove();
        showUploadBtn();
    })
}
function showUploadBtn() { //是否显示上传按钮
    var uploaded_length = $(".img_common").length;
    $("#uploaded_length").text(uploaded_length);
    var other_length = (upload_total - uploaded_length) > 0 ? upload_total - uploaded_length : 0;
    $("#upload_other").text(other_length);
    var uploaded_length = $(".img_common").length;
    if (uploaded_length >= upload_total) {
        $("#local_upload").hide();
    } else {
        $("#local_upload").show();
    }
}
function showPhotoUploadBox(obj) { //显示上传弹出层
    var left = obj.offset().left;
    var top = obj.offset().top + 26;
    $("#photo_upload_box_outside").css({"left": left, "top": top}).show()
}
function photo_upload_close() {
    $("#photo_upload_box_outside").fadeOut(500, function() {
        $(".li_upload").remove();
    })
}
$(function() {
    $(".blur_area").hover(function() {
        $("body").attr('is_hover', 1);
    }, function() {
        $("body").attr('is_hover', 0);
    });
    $(".blur_area").blur(function() {
        if ($("body").attr("is_hover") == 0) {
            photo_upload_close();
        }
    })
})
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/863.html
评论11
头像

友情提示:垃圾评论一律封号 最新福利:领取阿里云限量2000通用代金券

  • 头像 10楼
    08-05 08:57
    路明非非非
    先评论下,积分
  • 头像 9楼
    11-28 21:13
    517809235
    很不错 谢谢
  • 头像 8楼
    06-05 11:46
    xq1q1
    有没有积分啊
  • 头像 7楼
    12-12 10:49
    zh351590
    大多都是用plupload
  • 头像 6楼
    08-31 20:09
    花一样的少年
    正式我想要的资源!积分不多
  • 头像 5楼
    08-25 13:50
    昵称
    积分大比拼
  • 头像 4楼
    07-30 22:26
    541449306@qq.com
    弹窗效果实用性不强。
  • 头像 3楼
    06-19 14:59
    zhiai
    感觉还不错
  • 头像 板凳
    05-16 22:38
    cz521000
    这个就比较有趣了!
  • 头像 椅子
    03-18 16:17
    zhangzhongsha
    喜欢, 不过是弹出效果 实用不怎么强
1 2