PHP實現多張圖片上傳預覽功能

PHP實現多張圖片上傳預覽功能

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(); 
    }) 
}

本實例下載:https://www.sucaihuo.com/php/2889.html

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章