javascript - !!!!!!一个相册页面,要实现选中图片删除图片,在利用ajax通过URL传递参数时,不知道应该怎么确定参数?
ringa_lee
ringa_lee 2017-04-11 13:13:47
0
1
770

一个相册页面,要实现选中图片删除图片,在利用ajax通过URL传递参数时,不知道应该怎么确定参数,后台接口需要"member_id":和"delete_value":,但不知道"delete_value":怎么表示;
接口:

代码:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=750,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="">
<meta name="format-detection" content="telephone=no">
<title>我的相册</title>
<link rel="stylesheet" href="css/slicy.css">
<link rel="stylesheet" href="css/style-st.css">
<link rel="stylesheet" href="css/style-st.css" />
</head>

<style>

.photo_list ul li .img img{
    width: 234px; height: 301px; border: 0; outline: none;
} 

</style>
<body>
<p class="layout">

<p class="header header5">
    
    <h2>个人相册</h2>
</p>
<p class="photo_list">
    <form id="photoForm">
    <ul>
        <li>
            <p class="file">
                <input type="file" name="file" id="getImage0" value="" 
                    accept="image/jpg,image/jpeg,image/png,image/gif"
                    onchange="javascript:setImagePreview('getImage0','img0','Img_Hidden5');" />
                <input type="file" name="file1" id="getImage1" value="" 
                    accept="image/jpg,image/jpeg,image/png,image/gif"
                    onchange="javascript:setImagePreview('getImage1','img1','Img_Hidden5');" />
                <input type="file" name="file2" id="getImage2" value="" 
                    accept="image/jpg,image/jpeg,image/png,image/gif"
                    onchange="javascript:setImagePreview('getImage2','img2','Img_Hidden5');" />
                <input type="file" name="file3" id="getImage3" value=""  
                    accept="image/jpg,image/jpeg,image/png,image/gif"
                    onchange="javascript:setImagePreview('getImage3','img3','Img_Hidden5');" />
                <input type="file" name="file4" id="getImage4" value=""  
                    accept="image/jpg,image/jpeg,image/png,image/gif"
                    onchange="javascript:setImagePreview('getImage4','img4','Img_Hidden5');" />
            </p>
        </li>
        <li>
            <p class="img">
                <img id="img0" src=""/>
            </p>
            <p class="ico" style="display: none;">
                <img src="imgs/ico-st14.png"/>
            </p>
        </li>
        <li>
            <p class="img">
                <img id="img1" src=""/>
            </p>
            <p class="ico" style="display: none;">
                <img src="imgs/ico-st14.png"/>
            </p>
        </li>
        <li>
            <p class="img">
                <img id="img2" src=""/>
            </p>
            <p class="ico" style="display: none;">
                <img src="imgs/ico-st14.png"/>
            </p>
        </li>
        <li>
            <p class="img">
                <img id="img3" src="">
            </p>
            <p class="ico" style="display: none;">
                <img src="imgs/ico-st14.png"/>
            </p>
        </li>
        <li>
            <p class="img">
                <img id="img4" src=""/>
            </p>
            <p class="ico" style="display: none;">
                <img src="imgs/ico-st14.png"/>
            </p>
        </li>
    </ul>
    <h4>最多上传5张照片</h4>
    
        <input type="hidden" name="member_id" />
    <p class="submit submit-mt70" style="margin-top: 20px;">
        <input onclick="uploadPic()" type="button" name="" id="uploadPhoto" value="上传图片" class="ui-submit"/>
    </p>
    <p class="submit submit-mt70" style="margin-top: 20px;">
        <input onclick="deletePic()" type="button" name="" id="deletePhoto" value="删除图片" class="ui-submit"/>
    </p>
    </form>
</p>

</p>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<!--<script type="text/javascript" src="js/script.js"></script>-->

<script>

var member_id = localStorage.getItem("member_id");
var photo_mode = 0;    //0为未上传图片,1为已上传图片
var imgIndex = 0;    //图片序数
var delete_value;
//All_Url = "http://192.168.1.113:8011/";
$(function () {
    //页面不足一屏,铺满一屏
    $('.layout').css('min-height',$(window).height());
    //切换功能
    $('.header .right a.ico_more').click(function(){
        $('.header .right ul').slideToggle();
        return false;
    })
    $('.ui-taber').each(function(){
        var obj = $(this);
        //var con = obj.data('for');
        obj.find('li').click(function(){
            obj.find('li').removeClass().eq($(this).index()).addClass('selected');
            //$('.'+ con).hide().eq($(this).index()).show();
            return false;
        })
    });
    //图片只读
    $("[type=file]").hide().eq(0).show();
    //查看图片
    $.ajax({
        url: All_Url + 'personAlbum/lookMePhotoAlbum',
        data: JSON.stringify({
            "member_id":parseInt(member_id)
        }),
        dataType: 'json',
        type: 'post',
        timeout: 10000,
        success: function (data) {
            //console.log(data);
            if (data.stateCode == 200) {
                $("#img0").attr("src",data.data.p1);
                $("#img1").attr("src",data.data.p2);
                $("#img2").attr("src",data.data.p3);
                $("#img3").attr("src",data.data.p4);
                $("#img4").attr("src",data.data.p5);
                //$("#uploadPhoto").hide();
                //$("#getImage").attr("disabled","disabled");
            }else if (data.stateCode == 500){
                alert("请上传图片!");
            }
        },
        error: function () {
            alert("显示图片失败,请重试!");
            //开启登录按钮
        }
    });
    //选中图片显示图标
    $('.photo_list li').click(function(){
        if($(this).find('.ico').is(':visible')){
            $(this).find('.ico').hide();
        }else{
            $(this).find('.ico').show();
        }
    })
    
})

//下面用于图片上传预览功能
function setImagePreview(doc, preview, localImag) {
    var docObj = document.getElementById(doc);
    var imgObjPreview = document.getElementById(preview);
    if (docObj.files && docObj.files[0]&&imgIndex<5) {
        //火狐下,直接设img属性
        imgObjPreview.style.display = 'block';
        imgObjPreview.style.width = '234px';
        imgObjPreview.style.height = '301px';
        //火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式
        imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
        
        imgIndex++;
        $("[type=file]").hide().eq(imgIndex).show();
    }else if (imgIndex>=5) {
        imgIndex=5;
        alert("最多上传5张图片!")
    }
    return true;
}

var deletePI;
function deletePic() {
    $(".photo_list ul li").each(function() {
        if($(this).find(".ico").is(':visible')){
//          $(this).find(".img img").attr("src","");
//          $(this).find(".ico").hide();
        }
    });
    $.ajax({
        url: All_Url + 'personAlbum/deletePhoto',
        data: JSON.stringify({
            "member_id":parseInt(member_id),
            "delete_value":????
        }),
        dataType: 'json',
        type: 'post',
        timeout: 10000,
        success: function (data) {
            //console.log(data);
            if (data.stateCode == 200) {
                
                alert("删除成功!");
            }
        },
        error: function () {
            alert("删除图片失败,请重试!");
            //开启登录按钮
        }
    });
}

</script>
</body>
</html>
页面图:

ringa_lee
ringa_lee

ringa_lee

全員に返信(1)
洪涛

你渲染DOM的时候,你就把图片的标识(一般来说就是id),绑定到DOM上。然后你点击的时候就是把你点击的DOM上的标识取出来。删除的时候,就是删除的是你点击过的么。

いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート