PHP實現多張圖片上傳預覽功能,支持左右移動圖片切換位置、刪除圖片,限制圖片上傳的數量等php
-
向左移動圖片css
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}); } }
向右移動圖片html
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}); } }
獲取第一張圖片(封面)和全部上傳的圖片ide
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刪除圖片post
function delPic(pic, file_id) { //刪除圖片 參數1圖片路徑 參數2 隨機數 $.post("del.php", {pic: pic}, function(data) { $("#" + file_id).remove(); showUploadBtn(); }) }
本實例下載:https://www.sucaihuo.com/php/2889.htmlthis