头像

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

来源:http://weibo.com/ 素材火管理员 2016-06-02 00:21浏览(6483) 收藏

php仿新浪微博多图片上传,支持在线演示,上传后可立即看到上传后的图片,这款上传插件很好,很多用户都反应很好用。
plupload仿新浪微博多图片上传兼容IE
分类:PHP > 上传 难易:中级

程序员,你不是一个人;网站开发QQ群:35291327 在线充值,或联系QQ416148489直接充值

查看演示 下载资源: 34 下载资源 下载积分: 360 积分

上传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();
        }
    })
})
声明:本文为原创文章,如需转载,请注明来源sucaihuo.com并保留原文链接:http://www.sucaihuo.com/js/863.html
评论115
头像

友情提示:垃圾评论一律封号...

  • 头像 114楼
    06-16 08:18
    暗影-玄极
    看起来不错呦!666
  • 头像 113楼
    06-15 19:19
    wh5784113
    效果不错,先下下来研究一下哈,谢谢分享
  • 头像 112楼
    06-14 22:35
    yzphp
    非常牛,样式做的也不错,就是不支持分片上传!
  • 头像 111楼
    06-07 15:42
    蜡笔的小新
    正需要这样的,666
  • 头像 110楼
    06-07 13:25
    windie55
    看着效果相当不错,不过没那么多积分,顶起。
  • 头像 109楼
    05-10 08:55
    jiaozi
    不太会用啊
  • 头像 108楼
    05-09 09:00
    3192989925@qq.com
    看起来很强大 收藏一下
  • 头像 107楼
    05-06 09:15
    wbhy920
    看起来还可以,很炫啊
  • 头像 106楼
    04-28 14:30
    a51821064
    看似很不错,拿来试试!!
  • 头像 105楼
    04-27 17:05
    a51821064
    看似很不错,拿来试试!
1 2