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

php结合数据库演示商品多图片上传

来源:http://www.erdangjiade.com/ 沐浴春风 2016-07-10 05:53浏览(4579)

这是一个带有mysql数据存储多图片商品的上传实例,本demo中的多图片以json格式存储,当然你也可以用符合隔开,比如英文逗号。下节课我们会分享图片旋转,放大缩小,以及生成缩略图

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

php结合数据库演示商品多图片上传
分类:PHP > 上传 难易:中级
查看演示

加我微信,拉你进VIP群学习:

下载资源 下载积分: 20 积分

plupload多图片上传

var uploader = new plupload.Uploader({
    runtimes: 'gears,html5,html4,silverlight,flash',
    browse_button: 'logo_upload_btn',
    url: "ajax.php",
    flash_swf_url: 'plupload/Moxie.swf',
    silverlight_xap_url: 'plupload/Moxie.xap',
    filters: {
        max_file_size: '25mb',
        mime_types: [
            {title: "files", extensions: "jpg,png,gif,jpeg"}
        ]
    },
    multi_selection: true,
    init: {
        FilesAdded: function(up, files) {
            $("#btn_submit").attr("disabled", "disabled").addClass("disabled").val("正在上传...");
            var item = '';
            plupload.each(files, function(file) { //遍历文件
                item += "<div class='item' id='" + file['id'] + "'><div class='progress'><span class='bar'></span><span class='percent'>0%</span></div></div>";
            });
            $("#photos_area").append(item);
            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) {
            var data = eval("(" + info.response + ")");
            $("#" + file.id).html("<input type=hidden name='pics[]' value='" + data.src + "'><img src='" + data.src + "' alt='" + data.name + "' width='100px' height='100px'>\n\
            <div class='operate'><i class='toleft'>左移</i><i class='toright'>右移</i><i class='del'>删除</i></div>")

            $("#btn_submit").removeAttr("disabled").removeClass("disabled").val("提 交");
            if (data.error != 0) {
                alert(data.error);
            }
        },
        Error: function(up, err) {
            if (err.code == -601) {
                alert("请上传jpg,png,gif,jpeg,zip或rar!");
                $("#btn_submit").removeAttr("disabled").removeClass("disabled").val("提 交");
            }
        }
    }
});
uploader.init();

左右切换和删除图片

$(".toleft").live("click", function() {
    var item = $(this).parent().parent(".item");
    var item_left = item.prev(".item");
    if (item_left.length == 0) {
        item.insertAfter($("#photos_area").children(".item:last"));
    } else {
        item.insertBefore(item_left);
    }

})
$(".toright").live("click", function() {
    var item = $(this).parent().parent(".item");
    var item_right = item.next(".item");
    if (item_right.length == 0) {
        item.insertBefore($("#photos_area").children(".item:first"));
    } else {
        item.insertAfter(item_right);
    }
})
$(".del").live("click", function() {
    $(this).parent().parent(".item").remove();
})
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/891.html
评论17
头像

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

  • 头像 16楼
    06-11 18:06
    ceostation
    感谢楼主分享,太需要这个了
  • 头像 15楼
    05-23 16:07
    caihong
    <br /><br />好用嗎
  • 头像 14楼
    11-10 00:17
    asrdweb
    虽然简单,但也不失办法!<br />啊<br />
  • 头像 13楼
    11-10 00:15
    asrdweb
    厉害了 正好用得上
  • 头像 12楼
    02-04 18:21
    sailing_sailor
    这就图文并茂了
  • 头像 11楼
    01-25 08:18
    ngu137
    很不错的上传功能,收藏起来
  • 头像 10楼
    10-11 16:33
    haochunqiu
    很好 很不错
  • 头像 9楼
    09-07 10:31
    buhaoxiao135
    谢谢可以的
  • 头像 8楼
    08-31 17:33
    yunxiaoxue027
    挺好的,谢谢楼主
  • 头像 7楼
    08-22 11:40
    zyq123
    挺好的,又学到了东西
1 2