在线头像上传（js）-CSDN博客

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jquery-1.8.3.min.js"></script>
</head>
<body>
    <div id="divimg" >
   </div>
    <input type="button" name="name" value="上传" id="btnUpload"/>
    <div >
        <img src="" id="selectId" style="width:100px; height:100px" />
    </div>

</body>
</html>
<script>
    $(function (e) {
        var arrImg = ["0.jpg", "1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg",
            "6.jpg", "7.jpg", "8.jpg", "9.jpg", "10.jpg", "11.jpg", "12.jpg"];
        $("#divimg").append(function () {
            for (var i = 0; i < arrImg.length; i++) {
                $("#divimg").append("<img src='img/" + arrImg[i] + "', style='width:100px; height:100px' class='eachImg'/><&nbsp;&nbsp;/>");
            }
        });
    //});

    //$(function () {
        $(".eachImg").click(function () {
            var src = $(this).attr("src");
            //alert(src.replace("img/", ""));
            $("#selectId").attr("src", src);
        });

        $("#btnUpload").click(function () {
            var srcimg = $("#selectId").attr("src").replace("img/", "");
            $.ajax({
                type: "POST",
                url: "/Home/DownloadFile",
                contentType: "application/json",
                data: srcimg
            });
        });
    });
</script>