jquery - 我正在尝试能够拍摄上传的图片并将其设为背景图片

标签 jquery html css

我的代码无法正常工作,我无法弄清楚原因,我试图在不使用数据库的情况下获取上传的图像并将其设为背景图像。请帮忙!我最常使用 HTML 和 CSS,但我正在尝试使用此处列出的 jquery 代码来执行我正在寻找的操作。

代码:

<html>
<head>
    <title>Seamless Trial</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
    <style>
        img {
            padding:1px;
            border:1px solid black;
            background-color: white;
            width:100px;
            }
        article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; }
    </style>
    <script language="JavaScript">
        <!--
                // Copyright 2001 by www.CodeBelly.com Please do *not* remove this notice.

            var backImage = new Array(); // don't change this

                // Enter the image filenames you wish to use. Follow the pattern to use more images.  
                // The number in the brackets [] is the number you number in the brackets [] is the number you
                // will use in the function call to pick each image.
                // Note how backImage[0] = "" -- which would set the page to *no* background image.

            backImage[0] = "#";
            backImage[0].id = "blah";  
            backImage[1] = "#";
            backImage[1].id = "blah";  
            backImage[2] = "black-rough-leather.jpg";
            backImage[3] = "newspapers.jpg";
            backImage[4] = "seamless-fuzzy-leopard.jpg";

                // ----Do not edit below this line.---

            function changeBGImage(whichImage){
                if (document.body){
                document.body.background = backImage[whichImage];}
            }

        //-->
        <!-- input thingy   
            function readURL(input) {
                if (input.files && input.files[0]) {
                    var reader = new FileReader();

                    reader.onload = function (e) {
                    $('#blah')
                        .attr('src', e.target.result)
                        .width(150)
                        .height(200);
                    };
                reader.readAsDataURL(input.files[0]);
                }
            }
        // end input thingy --!>
    </script>
</head>
<body>
<input type='file' onchange="readURL(this);" /><br><br>
<a href="javascript:changeBGImage(1)"><img id="blah" src="#" alt="your image" /></a>

    <a href="javascript:changeBGImage(2)"><img src="black-rough-leather.jpg"></a><br><br>
    <a href="javascript:changeBGImage(3)"><img src="newspapers.jpg"></a><br><br>
    <a href="javascript:changeBGImage(4)"><img src="seamless-fuzzy-leopard.jpg"></a><br><br>
    <a href="javascript:changeBGImage(5)"><img src=""></a><br><br>

</body>

最佳答案

要设置正文背景,您应该执行以下操作。

 document.body.style.background = "url('" + backImage[whichImage] + "')";

请检查这个 fiddle https://jsfiddle.net/sherin81/k463Ljzg/

关于jquery - 我正在尝试能够拍摄上传的图片并将其设为背景图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34605147/

相关文章:

javascript - 当选中复选框时,如何动态地将复选框值从 View 传递到 Controller ?

html - Wordpress 的动态网格照片库无法正确显示图像

html - Materialise - 模态在移动设备中正在缩小

javascript - 将 sweetalert2 与 bootstrap 4 结合使用

javascript - 确认对话框多次触发

javascript - css3旋转顶部和左侧坐标

javascript - 如何创建除顶部 70px 之外的整页覆盖?

javascript - 在javascript中延迟函数的更好方法?

javascript - 验证尺寸文本输入 javascript

CSS 帮助顶部菜单项