Дыялог Адкрыць файл і адправіць малюнак, націснуўшы выява

Я спрабую загрузіць малюнак, націснуўшы на існае малюнак у пэўным элеменце.

Такім чынам, карыстальнік націсне на малюнку, дыялог загрузкі файла будзе адлюстроўвацца, і калі карыстальнік выбірае малюнак з файла дыялогавага акна формы аўтаматычна адпраўляе старонку формы і перазагружаецца.

Вось код, у мяне ёсць:

$(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>

профілю DIV дзе ўтрымліваецца выява

У мяне ўжо ёсць код, каб паказаць малюнак. Мне проста трэба, каб адкрыць дыялогавае акно, і на блізкіх, адпраўце форму і абновіце старонку.

Вось мой іншы код:

<?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 '', $user_data['firstname'], '\'s Profile Image';
        }
        ?>
2

10 адказы

Гэта цяжка, каб выклікаць ўвод тыпу файла, націснуўшы на нешта іншае. Самая вялікая праблема, што вы сутыкнецеся ў тым, што IE будзе бачыць гэта як праблему бяспекі і, магчыма, не дазволіць вам гэта зрабіць (калі ўваход паказаны). Каб абыйсці гэтую праблему, вы маглі б «зьнікнуць» ўваход ззаду малюнка, так што, калі карыстальнік націскае на малюнак, яны на самой справе націснуўшы на ўваходзе файла.

Ваш HTML можа выглядаць наступным чынам:

<div class="hiddenFileInputContainter">
    
    <input type="file" name="fileUp" class="hidden" accept="image/*">
</div>

Затым вам трэба будзе ўсталяваць непразрыстасць ўваходу ў нуль, каб даць малюнак ззаду яго будзе відаць, без фактычнага выдалення ўваходу са старонкі:

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);
}

Акрамя таго, неабходна будзе ўсталяваць памеры малюнка і кантэйнер:

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;
}

Звярніце ўвагу, што памеры на ўваход у прызначаныя для перапаўнення, так што незалежна ад таго, дзе вы пстрыкніце на кантэйнеры, вы трапіце на ўваход у яго. Уваход прызначаецца, каб быць як мага больш, і фактычныя памеры кнопкі устаноўлены на кантэйнеры і малюнак.

Пасля таго, як вам удалося адкрыць дыялогавае акно, запоўніўшы форму будзе толькі пытанне як гэта зрабіць:

$("#fileUploadField").on("change", function() {
    $("#formId").submit();
});
4
дададзена

Гэта цяжка, каб выклікаць ўвод тыпу файла, націснуўшы на нешта іншае. Самая вялікая праблема, што вы сутыкнецеся ў тым, што IE будзе бачыць гэта як праблему бяспекі і, магчыма, не дазволіць вам гэта зрабіць (калі ўваход паказаны). Каб абыйсці гэтую праблему, вы маглі б «зьнікнуць» ўваход ззаду малюнка, так што, калі карыстальнік націскае на малюнак, яны на самой справе націснуўшы на ўваходзе файла.

Ваш HTML можа выглядаць наступным чынам:

<div class="hiddenFileInputContainter">
    
    <input type="file" name="fileUp" class="hidden" accept="image/*">
</div>

Затым вам трэба будзе ўсталяваць непразрыстасць ўваходу ў нуль, каб даць малюнак ззаду яго будзе відаць, без фактычнага выдалення ўваходу са старонкі:

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);
}

Акрамя таго, неабходна будзе ўсталяваць памеры малюнка і кантэйнер:

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;
}

Звярніце ўвагу, што памеры на ўваход у прызначаныя для перапаўнення, так што незалежна ад таго, дзе вы пстрыкніце на кантэйнеры, вы трапіце на ўваход у яго. Уваход прызначаецца, каб быць як мага больш, і фактычныя памеры кнопкі устаноўлены на кантэйнеры і малюнак.

Пасля таго, як вам удалося адкрыць дыялогавае акно, запоўніўшы форму будзе толькі пытанне як гэта зрабіць:

$("#fileUploadField").on("change", function() {
    $("#formId").submit();
});
4
дададзена

Глядзіце паведамленне ад карыстальніка hardsetting для больш лёгкіх і (ИМО), лепшага рашэння:

<div class="image-upload">


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

CSS:

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

Замяніць тып ўводу = файл з дапамогай малюнка

3
дададзена
Хоць гэтая спасылка можа адказаць на гэтае пытанне, то лепш ўключыць асноўныя часткі адказу тут і даць спасылку для даведкі. Link толькі адказы могуць стаць несапраўднымі, калі звязанымі рэдагаваць старонкі.
дададзена аўтар Guillaume Poussel, крыніца
Дзякуй за водгук, Гіём! Я цяпер абнавіў адказ :)
дададзена аўтар Sirar Salih, крыніца

Глядзіце паведамленне ад карыстальніка hardsetting для больш лёгкіх і (ИМО), лепшага рашэння:

<div class="image-upload">


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

CSS:

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

Замяніць тып ўводу = файл з дапамогай малюнка

3
дададзена
Хоць гэтая спасылка можа адказаць на гэтае пытанне, то лепш ўключыць асноўныя часткі адказу тут і даць спасылку для даведкі. Link толькі адказы могуць стаць несапраўднымі, калі звязанымі рэдагаваць старонкі.
дададзена аўтар Guillaume Poussel, крыніца
Дзякуй за водгук, Гіём! Я цяпер абнавіў адказ :)
дададзена аўтар Sirar Salih, крыніца

У мяне значна лепшае рашэнне,

як у мяне ж патрабаванне ў маім дадатку MVC.

HTML: тэг выявы для паказу выявы, якое звязваюць з задняга канца,



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

JQuery: OnClick гэтага малюнка тэга,

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

Такім чынам, мой FileUpload выбірае файл, захоўвае яго ў PicturePath, і калі я адпраўляю форма, я быў абраны чынам на заднім канцы ...

2
дададзена

У мяне значна лепшае рашэнне,

як у мяне ж патрабаванне ў маім дадатку MVC.

HTML: тэг выявы для паказу выявы, якое звязваюць з задняга канца,



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

JQuery: OnClick гэтага малюнка тэга,

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

Такім чынам, мой FileUpload выбірае файл, захоўвае яго ў PicturePath, і калі я адпраўляю форма, я быў абраны чынам на заднім канцы ...

2
дададзена
       <!-- button to open popup -->
        Open Popup


        <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>

Гэта з'яўляецца асноўным. Агульная ідэя атрымае Вас там. Я выказаў меркаванне, што вы хацелі JQuery, таму што ён быў у адным з тэгаў.

1
дададзена
       <!-- button to open popup -->
        Open Popup


        <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>

Гэта з'яўляецца асноўным. Агульная ідэя атрымае Вас там. Я выказаў меркаванне, што вы хацелі JQuery, таму што ён быў у адным з тэгаў.

1
дададзена
<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"/>            

your image

</div>

Некаторыя 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]);
        }
    }
1
дададзена
<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"/>            

your image

</div>

Некаторыя 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]);
        }
    }
1
дададзена