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

这是一个带有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

 ╭═══┤                          ├═══╮

 ║      ║ http://www.erdangjiade.com ║      ║

 ║      └═════════════┘      ║

 ║       ┊┊☆ ┊┊☆ ┊┊☆ ┊┊☆        ║

 ║       ┊☆┊ ┊☆┊ ┊☆┊ ┊☆┊        ║

 ║       ☆┊☆ ☆┊☆ ☆┊☆ ☆┊☆        ║

 ║       ┆☆ ┆☆ ┆☆ ┆☆        ║

 ║       ┊┊☆ ┊┊☆ ┊┊☆ ┊┊☆        ║

 ║  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^  ║

 ║         陪伴您轻松设计漂亮的网页         ║

 ║      ┌═════════════┐      ║

 ╰═══┤网站模板 网页特效 图标下载├═══╯

         └═════════════┘        

          更多原创模板，尽在 http://www.erdangjiade.com/templates  

          免费扒模板，请访问 http://www.erdangjiade.com/help/template
          网页特效下载：www.erdangjiade.com/js

          php：www.erdangjiade.com/php

     

         QQ群 368848856