Datei-öffnen-dialog und senden Bild durch klicken auf ein Bild

Ich versuche, ein Bild hochzuladen, indem Sie auf ein vorhandenes Bild in einem bestimmten element.

So wird der Benutzer auf ein Bild klicken, die Datei-upload-dialog wird sich zeigen und wenn der Benutzer wählt ein Bild aus dem Datei-dialog die form automatisch das Formular absendet und die Seite lädt.

Hier einige Codes die ich habe:

$(document).ready(function() {
        $('#profile').click(function(e){
            $('#fileUploadField').click();
            e.preventDefault();
        });
    header('Location: ' . $current_file);
    });

<form action="" method="post" enctype="multipart/form-data">
    <input type="file" name="profile" id="fileUploadField"> <input type="submit">
</form>

Profil div wo das Bild enthalten ist

Habe ich bereits den code zum anzeigen des Bildes. Ich brauche nur den dialog zu öffnen, und auf close, senden Sie das Formular und die Seite aktualisieren.

Hier ist mein anderer code:

<?php
        if (isset($_FILES['profile']) === true) {
            if (empty($_FILES['profile']['name']) === true) {
                echo 'Please choose a file!';
            } else {
                $allowed = array('jpg', 'jpeg', 'gif', 'png');

                $file_name = $_FILES['profile']['name'];
                $file_extn = strtolower(end(explode('.', $file_name)));
                $file_temp = $_FILES['profile']['tmp_name'];

                if (in_array($file_extn, $allowed) === true) {
                    change_profile_image($session_user_id, $file_temp, $file_extn);

                    header('Location: ' . $current_file);
                    exit();

                } else {
                    echo 'Incorrect file type. Allowed: ';
                    echo implode(', ', $allowed);
                }
            }
        }

        if (empty($user_data['picture']) === false) {
            echo '<img src="', $user_data['picture'], '" alt="', $user_data['firstname'], '\'s Profile Image" style="height:100px">';
        }
        ?>

InformationsquelleAutor TheNameHobbs | 2013-05-22

  1. 5

    Es ist schwer, die trigger eine Eingabe vom Typ Datei, indem Sie auf etwas anderes. Das größte Problem, das Sie in ausgeführt wird, dass der IE dies als ein Sicherheitsrisiko und könnten nicht lassen Sie es tun (wenn der Eingang versteckt ist). Um dieses Problem, Sie könnte "fade" der Eingang hinter dem Bild, so dass, wenn der Benutzer auf das Bild klickt, sind Sie tatsächlich klicken Sie auf die Datei input.

    Ihre html könnte etwa so Aussehen:

    <div class="hiddenFileInputContainter">
    <img class="fileDownload" src="/images/ico_upload.png">
    <input type="file" name="fileUp" class="hidden" accept="image/*">
</div>

    Dann würden Sie brauchen, um die Deckkraft der Eingang auf null, damit das Bild dahinter sichtbar sein, ohne Sie tatsächlich zu entfernen, den Eingang von der Seite:

    input[type='file'].hidden
{
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    font-size: 50px;
    cursor: pointer;
    opacity: 0;
    -moz-opacity: 0;
    filter: Alpha(Opacity=0);
}

    Würden Sie auch brauchen, um die Dimensionen für das Bild und den container:

    img.fileDownload
{
    height: 26px;
    width: 26px;
    padding: 0;
    display: inline-block; 
    vertical-align: middle;
    margin: 0 4px 0 0;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
}

div.hiddenFileInputContainter
{
    position: relative;
    display: inline-block;
    width: 27px;
    height: 27px;
    overflow: hidden;
    vertical-align: middle;
    cursor: pointer;
}

    Beachten Sie, dass die Eingabe der Abmessungen gemeint sind, zu einem überlauf, so dass, egal wo Sie klicken Sie auf die container, die Sie auf den Eingang hinein. Die Eingabe soll so groß wie möglich und die tatsächlichen Abmessungen der Schaltfläche sind auf der container-und der Bild.

    Sobald Sie es geschafft haben, öffnen Sie den dialog, das Einreichen der form wäre nur eine Sache zu tun:

    $("#fileUploadField").on("change", function() {
    $("#formId").submit();
});

    InformationsquelleAutor JayPea

  2. 3

    Finden Sie die post durch den Benutzer hardsetting für eine leichte und (IMO) die bessere Lösung:

    <div class="image-upload">
<label for="file-input">
    <img src="placeholder.jpg"/>
</label>

<input id="file-input" type="file"/>
</div>

    CSS:

    .image-upload > input
{
   display: none;
}

    Ersetzen " input type=file durch ein Bild

    Während dieser Zusammenhang kann eine Antwort auf die Frage, ist es besser, die wesentlichen Teile der Antwort hier und den link zur Referenz. Link-nur Antworten können ungültig werden, wenn die verlinkten Seite ändert.
    Danke für das feedback, Guillaume! Ich habe jetzt aktualisiert die Antwort 🙂

    InformationsquelleAutor Sirar Salih

  3. 2
    <div class="col-lg-10">

<input type="file" id='upload' class="col-lg-2 form-control" name="img"  onchange="readURL(this);" style="visibility: hidden; width: 1px; height: 1px"/>            

<a href="" onclick="document.getElementById('upload').click(); return false"><img id="blah" src="https://www.digitalocean.com/assets/media/fccmodal/github-c9188b0b.svg" alt="your image" style="width: 250px; height: 250px;"/></a>

</div>

    Einige jquery :

    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#blah')
                    .attr('src', e.target.result);
            };

            reader.readAsDataURL(input.files[0]);
        }
    }

    InformationsquelleAutor Eric Thakvika

  4. 2

    Habe ich weit bessere Lösung,

    als ich habe, dieselbe Anforderung in meiner MVC Anwendung.

    HTML :
    image-tag für das Bild anzeigen, das binden von back-end,

    <img class='img img-responsive img-thumbnail' onclick='return OpenFileBrowser(event)' src="@Model.PictureContentBase" alt="" style="cursor:pointer;" />

<input type="file" name="PicturePath" id="fileUpload" accept=".png,.jpg,.jpeg,.gif,.tif" />

    JQuery: onclick der das image-tag,

    function OpenFileBrowser(elem) {
    $('#fileUpload').click()
}

    so, mein fileUpload wählt die Datei, speichert Sie in PicturePath, und wenn ich post
    form, die ich ausgewählt habe Bild am hinteren Ende...

    InformationsquelleAutor Bharat

  5. 1
           <!-- button to open popup -->
        <a href="#yourpopup" data-rel="popup" data-role="button" data-position-to="window" data-transition="flip">Open Popup</a>


        <div data-role="popop" id="yourpopup">
           <form id="yourform">
              ....inputs
            <button type="submit"> submit form</button>
        </div>


       <script>
           $('#yourform').submit( function() {
                $('#yourpopup').popup("close");
           });
       </script>

    Dass ist das grundlegende. Die Allgemeine Idee, die Sie dort bekommen wird. Ich nahm an, Sie wollte, jquery, weil es war in einer Ihrer tags.

    InformationsquelleAutor Four_lo

Schreibe einen Kommentar