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

浏览:1723 最后更新:2017-03-07 15:50 分类:示例 关键字: 多图片上传 微信上传
演示下效果:http://www.erdangjiade.com/js/891.html
这是一个带有mysql数据存储多图片商品的上传实例,本demo中的多图片以json格式存储,当然你也可以用符合隔开,比如英文逗号。下节课我们会分享图片旋转,放大缩小,以及生成缩略图
效果图:

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(); 
})
演示下效果:http://www.erdangjiade.com/js/891.html
评论( 相关
后面还有条评论,点击查看>>