PHP實現多張圖片上傳預覽功能實例,支持左右切換位置、刪除圖片、圖片數量限制,通過點擊獲取圖片按鈕可以獲取上傳圖片的封面和所有圖片等實用功能
向左移動圖片
function reverse_left(obj) {
var obj_li = obj.parents("li");
var obj_prev = obj_li.prev("li");
if (obj_prev.hasClass("li_upload")) {
obj_li.insertBefore(obj_prev);
obj_li.find(".uploading-tip").css({"height": 0});
}
}
向右移動圖片
function reverse_right(obj) {
var obj_li = obj.parents("li");
var obj_next = obj_li.next("li");
if (obj_next.hasClass("li_upload")) {
obj_li.insertAfter(obj_next);
obj_li.find(".uploading-tip").css({"height": 0});
}
}
獲取第一張圖片(封面)和所有上傳的圖片
function getPics() {
var pics = "";
$("#ul_pics").find(".img_common").each(function() {
pics += $(this).attr("src") + ",";
})
var logo = "";
if ($("#ul_pics").find(".img_common").length > 0) {
logo = $("#ul_pics").find(".img_common").eq(0).attr("src");
}
alert("第一張圖片:" + logo + "\n\所有圖片:" + pics)
}
Ajax刪除圖片
function delPic(pic, file_id) { //刪除圖片 參數1圖片路徑 參數2 隨機數
$.post("del.php", {pic: pic}, function(data) {
$("#" + file_id).remove();
showUploadBtn();
})
}
本文轉自:http://www.sucaihuo.com/php/2889.html 轉載請註明出處,謝謝!