Предоставьте пользователю возможность нажимать на изображения и загружать свои собственные изображения - PullRequest
Новая
       0

Предоставьте пользователю возможность нажимать на изображения и загружать свои собственные изображения

2 голосов
/ 16 июня 2020

У меня есть страница профиля, состоящая из двух человек. Я хочу, чтобы пользователи могли щелкнуть одно из двух изображений и загрузить свое собственное изображение в один из кадров изображения. 

    textarea {
        border: none;
        overflow: auto;
        outline: none;

        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }
    :root {
        font-size: 10px;
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }
    sans-serif;
        min-height: 100vh;
        background-color: #fafafa;
        color: #262626;
        padding-bottom: 3rem;
    }


    img {
        display: block;
    }

    .container {
      
        width: 400px;
        margin-left: auto;
        margin-right: auto;
        max-width: 93.5rem;
        margin: 0 auto;
        padding: 0 2rem;
    }

    .btn {
        display: inline-block;
        font: inherit;
        background: none;
        border: none;
        color: inherit;
        padding: 0;
        cursor: pointer;
    }

    .btn:focus {
        outline: 0.5rem auto #4d90fe;
    }

    .visually-hidden {
        position: absolute !important;
        height: 1px;
        width: 1px;
        overflow: hidden;
        clip: rect(1px, 1px, 1px, 1px);
    }

    /* Profile Section */

    .profile {
        padding: 5rem 0;
    }

    .profile::after {
        content: "";
        display: block;
        clear: both;
    }


    .profile-user-settings,
    .profile-stats,
    .profile-bio {
        float: left;
        width: calc(66.666% - 2rem);
    }

    .profile-user-settings {
        margin-top: 1.1rem;
    }

    .profile-user-name {
        display: inline-block;
        font-size: 3.2rem;
        font-weight: 300;
    }

    .profile-edit-btn {
        font-size: 1.4rem;
        line-height: 1.8;
        border: 0.1rem solid #dbdbdb;
        border-radius: 0.3rem;
        padding: 0 2.4rem;
        margin-left: 2rem;
    }





    .profile-stats li {
        display: inline-block;
        font-size: 1.6rem;
        line-height: 1.5;
        margin-right: 4rem;
        cursor: pointer;
    }

    .profile-stats li:last-of-type {
        margin-right: 0;
    }



    .profile-real-name,
    .profile-stat-count,
    .profile-edit-btn {
        font-weight: 600;
    }

    /* Gallery Section */

    .gallery {
        display: flex;
        flex-wrap: wrap;
        margin: -1rem -1rem;
        padding-bottom: 3rem;
    }

    .gallery-item {
        position: relative;
        flex: 1 0 22rem;
        margin: 1rem;
        color: #fff;
        cursor: pointer;
    }

    .gallery-item:hover .gallery-item-info,
    .gallery-item:focus .gallery-item-info {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
    }

    .gallery-item-info {
        display: none;
    }

    .gallery-item-info li {
        display: inline-block;
        font-size: 1.7rem;
        font-weight: 600;
    }

    .gallery-item-likes {
        margin-right: 2.2rem;
    }

    .gallery-item-type {
        position: absolute;
        top: 1rem;
        right: 1rem;
        font-size: 2.5rem;
        text-shadow: 0.2rem 0.2rem 0.2rem rgba(0, 0, 0, 0.1);
    }

    .fa-clone,
    .fa-comment {
        transform: rotateY(180deg);
    }

    .gallery-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }



    /* Media Query */

    @media screen and (max-width: 40rem) {
        .profile {
            display: flex;
            flex-wrap: wrap;
            padding: 4rem 0;
        }

        .profile::after {
            display: none;
        }

        .profile-image,
        .profile-user-settings,
        .profile-bio,
        .profile-stats {
            float: none;
            width: auto;
        }


        .profile-user-settings {
            flex-basis: calc(100% - 10.7rem);
            display: flex;
            flex-wrap: wrap;
            margin-top: 1rem;
        }

        .profile-user-name {
            font-size: 2.2rem;
        }

        .profile-edit-btn {
            order: 1;
            padding: 0;
            text-align: center;
            margin-top: 1rem;
        }

        .profile-edit-btn {
            margin-left: 0;
        }

        .profile-bio {
            font-size: 1.4rem;
            margin-top: 1.5rem;
        }

        .profile-edit-btn,
        .profile-bio,
        .profile-stats {
            flex-basis: 100%;
        }

        .profile-stats {
            order: 1;
            margin-top: 1.5rem;
        }

        .profile-stats ul {
            display: flex;
            text-align: center;
            padding: 1.2rem 0;
            border-top: 0.1rem solid #dadada;
            border-bottom: 0.1rem solid #dadada;
        }

        .profile-stats li {
            font-size: 1.4rem;
            flex: 1;
            margin: 0;
        }

        .profile-stat-count {
            display: block;
        }
    }

    /* Spinner Animation */

    @keyframes loader {
        to {
            transform: rotate(360deg);
        }
    }

    /*

 

    @supports (display: grid) {
        .profile {
            display: grid;
            grid-template-columns: 1fr 2fr;
            grid-template-rows: repeat(3, auto);
            grid-column-gap: 3rem;
            align-items: center;
        }

        .profile-image {
            grid-row: 1 / -1;
        }

        .gallery {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
            grid-gap: 2rem;
        }

        .profile-image,
        .profile-user-settings,
        .profile-stats,
        .profile-bio,
        .gallery-item,
        .gallery {
            width: auto;
            margin: 0;
        }

        @media (max-width: 40rem) {
            .profile {
                grid-template-columns: auto 1fr;
                grid-row-gap: 1.5rem;
            }

            .profile-image {
                grid-row: 1 / 2;
            }

            .profile-user-settings {
                display: grid;
                grid-template-columns: auto 1fr;
                grid-gap: 1rem;
            }

            .profile-edit-btn,
            .profile-stats,
            .profile-bio {
                grid-column: 1 / -1;
            }

            .profile-user-settings,
            .profile-edit-btn,
            .profile-settings-btn,
            .profile-bio,
            .profile-stats {
                margin: 0;
            }
        }
    }
    @import url(https://fonts.googleapis.com/css?family=Raleway:400,200,300,800);
    @import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
    figure.snip0056 {
      font-family: 'Raleway', Arial, sans-serif;
      position: relative;
      overflow: hidden;
      margin: 10px;
      min-width: 380px;
      max-width: 480px;
      width: 100%;
      background: #ffffff;
      color: #000000;
    }
    figure.snip0056 * {
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }
    figure.snip0056 > img {
      width: 50%;
      border-radius: 50%;
      border: 4px solid #ffffff;
      -webkit-transition: all 0.35s ease-in-out;
      transition: all 0.35s ease-in-out;
      -webkit-transform: scale(1.6);
      transform: scale(1.6);
      position: relative;
      float: right;
      right: -15%;
      z-index: 1;
    }
    figure.snip0056 figcaption {
      padding: 20px 30px 20px 20px;
      position: absolute;
      left: 0;
      width: 50%;
    }
    figure.snip0056 figcaption h2,
    figure.snip0056 figcaption p {
      margin: 0;
      text-align: left;
      padding: 10px 0;
      width: 100%;
    }
    figure.snip0056 figcaption h2 {
      font-size: 1.3em;
      font-weight: 300;
      text-transform: uppercase;
      border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    }
    figure.snip0056 figcaption h2 span {
      font-weight: 800;
    }
    figure.snip0056 figcaption p {
      font-size: 0.9em;
      opacity: 0.8;
    }
    figure.snip0056 figcaption .icons {
      width: 100%;
      text-align: left;
    }
    figure.snip0056 figcaption .icons i {
      font-size: 26px;
      padding: 5px;
      top: 50%;
      color: #000000;
    }
    figure.snip0056 figcaption a {
      opacity: 0.3;
      -webkit-transition: opacity 0.35s;
      transition: opacity 0.35s;
    }
    figure.snip0056 figcaption a:hover {
      opacity: 0.8;
    }
    figure.snip0056 .position {
      width: 100%;
      text-align: left;
      padding: 15px 30px;
      font-size: 0.9em;
      opacity: 1;
      font-style: italic;
      color: #ffffff;
      background: #000000;
      clear: both;
    }
    figure.snip0056.blue .position {
      background: #20638f;
    }
    figure.snip0056.red .position {
      background: #962d22;
    }
    figure.snip0056.yellow .position {
      background: #bf6516;
    }
    figure.snip0056:hover > img,
    figure.snip0056.hover > img {
      right: -12%;
    }
    @import url('//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');

    #social {
      position: absolute;
      right:    0;
      bottom:   0;
      margin: 20px 10px;
      text-align: center;
    }

    .smGlobalBtn { /* global button class */
        display: inline-block;
        position: relative;
        cursor: pointer;
        width: 50px;
        height: 50px;
        border:2px solid #ddd; /* add border to the buttons */
        box-shadow: 0 3px 3px #999;
        padding: 0px;
        text-decoration: none;
        text-align: center;
        color: #fff;
        font-size: 25px;
        font-weight: normal;
        line-height: 2em;
        border-radius: 27px;
        -moz-border-radius:27px;
        -webkit-border-radius:27px;
    }

    /* facebook button class*/
    .facebookBtn{
        background: #4060A5;
    }

    .facebookBtn:before{ /* use :before to add the relevant icons */
        font-family: "FontAwesome";
        content: "\f09a"; /* add facebook icon */
    }

    .facebookBtn:hover{
        color: #4060A5;
        background: #fff;
        border-color: #4060A5; /* change the border color on mouse hover */
    }

    /* twitter button class*/
    .twitterBtn{
        background: #00ABE3;
    }

    .twitterBtn:before{
          font-family: "FontAwesome";
          content: "\f099"; /* add twitter icon */
          
    }

    .twitterBtn:hover{
          color: #00ABE3;
          background: #fff;
          border-color: #00ABE3;
    }


    /* instagram button class*/
    .instagramBtn{
        background: #4169E1;
    }

    .instagramBtn:before{
          font-family: "FontAwesome";
          content: "\f16d"; /* add instagram icon */
    }

    .instagramBtn:hover{
          color: #00FFFF;
          background: #fff;
          border-color: #4169E1;
    }
image

Ответы [ 2 ]

0 голосов
/ 16 июня 2020

используйте этот код, чтобы выбрать изображение и нажать кнопку отправки, вам нужно обработать его с помощью вашего пакета

<form > <label for="myfile">Select a file:</label> <input type="file" id="myfile" name="myfile"><br><br> <input type="submit"> </form>

0 голосов
/ 16 июня 2020

Использовать метку и скрыть кнопку загрузки 

<form id='form' method='post' action='/'>
    <label for='img1'>
        <input id='img1' type='file' style='display: none;' />
        <img id='img1_preview' src='' />
    </label>

    <input type='submit' value='Update' />
</form>

Когда вы нажимаете img, который также нажимает на метку, он автоматически запускает входной файл, который открывает окно загрузки изображения, нажмите на отправить, чтобы отправить форму. Лучше использовать JS для захвата изображения и загрузки его с помощью ajax, хотя это будет более отзывчивым.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...