Использование меню для загрузки файлов

Question

Эй, ребята, у меня проблема с загрузкой. Хорошо, так что я знаю, основная загрузка будет идти-то вроде этого

<form action="upload.php" method="post" enctype="multipart/form-data"> 
    Select image to upload: 
    <input type="file" name="fileToUpload" id="fileToUpload"> 
    <input type="submit" value="Upload Image" name="submit"> 
</form> 

Затем небольшой PHP скрипт для загрузки фактического файла (сохранение и т.д ..) Теперь проблема заключается в том, что я не хочу использовать вход, чтобы сделать это, есть ли способ сделать это без ввода? Например, имея меню (пункт href), просто нажмите на него и используйте его для загрузки? Потому что я хочу сделать это, используя одну строку на странице, например, «изменить изображение профиля», и они выбирают это, кам. Я не хочу иметь 2 кнопки для этого.

Answer 1

Вы можете скрыть форму, и есть какой-либо элемент вызвать его с помощью JavaScript/JQuery:

///html 

    <p class="form"> 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt perferendis harum laboriosam, tempora expedita, quis reiciendis quos, vel non inventore voluptate velit? Expedita, asperiores impedit. 
</p> 
<form action="//" method="post" enctype="multipart/form-data" style="display: none"> 
    Select image to upload: 
    <input type="file" name="fileToUpload" id="fileToUpload"> 
    <input type="submit" value="Upload Image" name="submit"> 
</form> 

///javascript 
$(document).ready(function(){ 
    $('.form').on('click', function(e){ 
    e.preventDefault(); 
    $('#fileToUpload').trigger('click'); 
    }) 
}) 

https://jsfiddle.net/x3fecnqy/

Answer 2

Так что вы хотите отправить и загрузить в одну кнопку. Как в меню здесь демонстрационный

fiddleWithOutPrivew Если вы хотите загрузить с помощью большого пальца просвечивания, здесь другого FiddlewithTHumbview

$('#upload').on('click', function() { 
 
    $('#fileToUpload').trigger('click'); 
 

 
}); 
 
$('#upload').change(function() { 
 
    $('#img_up').submit(); 
 
});

form { 
 
    display: none; 
 
} 
 

 
header { 
 
    background-color: #333; 
 
    padding: 10px 0; 
 
} 
 

 
header ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
} 
 

 
header ul li { 
 
    display: inline-block; 
 
    position: relative; 
 
    padding: 10px; 
 
} 
 

 
.menu a { 
 
    color: #fff; 
 
    text-decoration: none; 
 
} 
 

 
.menu a:hover, 
 
.menu a:focus, 
 
.menu a:active { 
 
    color: #bbb; 
 
} 
 

 

<script 
 
    src="https://code.jquery.com/jquery-3.1.1.min.js" 
 
    integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
 
    crossorigin="anonymous"></script> 
 

 
    <header class="header"> 
 
    <ul class="menu"> 
 

 
    <li><a id="upload" href="#">upload</a></li> 
 
    <li><a href="#">test</a></li> 
 
    </ul> 
 
</header> 
 

 
<form action="//" method="post" enctype="multipart/form-data" id="img_up"> 
 

 
    <input type="file" name="fileToUpload" id="fileToUpload"> 
 
    <input type="submit" value="Upload Image" name="submit"> 
 
</form>