Проблемы с загрузкой аватара с одним кликом

Question

Я пытаюсь создать форму загрузки аватара с одним кликом. Это Javascript/PHP смешанный код:

<script type="text/javascript"> 
function uploadavatar(){ 
    $('#frmuploadavatar').submit(); 
} 
    <?php 
    if(isset($_POST["btnuploadavatar"])){ 
    $extension = pathinfo($_FILES["file"]["name"], PATHINFO_EXTENSION); 
    $filename = pathinfo($_FILES["file"]["name"], PATHINFO_FILENAME); 
    $allowedExts = array('jpg','png'); 
    if(!in_array($extension, $allowedExts)){ 
     ?> 
     $('#smlavatar').html("The uploaded file is not a jpg/png image!"); 
     $('#smlavatar').attr("class","warning"); 
     <?php 
    }else if($_FILES["file"]["size"]>2097152){ 
     ?> 
     $('#smlavatar').html("The uploaded file shouldn't exceed 2 megabytes!"); 
     $('#smlavatar').attr("class","warning"); 
     <?php 
    }else{ 
     $uploadpath = "avatars/" . $filename . rand(1,1000000) . "." . $extension; 
     move_uploaded_file($_FILES["file"]["tmp_name"], $uploadpath); 
     ?> 
     $('#imgavatar').attr("src","<?php echo $uploadpath; ?>"); 
     $('#smlavatar').html("New avatar upload successfully!"); 
     <?php 
    } 
} 
?> 
</script> 

А вот HTML код формы:

<form action="register.php" method="POST" id="frmuploadavatar"> 
<input type="file" class="avatarupload" id="inpuploadavatar" name="avatar" onchange="uploadavatar()" /> 
<input type="button" id="btnuploadavatar" value="Upload New Avatar" style="width: 150px;" /> 
</form> 

я не включил код CSS, но это закодированы так, что контроль загрузки файла скрыта, и кнопка видна, но пользователь фактически нажимает на элемент управления загрузкой файла вместо кнопки (загрузка файла на передней панели с помощью z-index).
Я знаю, что функция uploadavatar() вызывается путем тестирования с предупреждением. Однако форма «frmuploadavatar» не отправляется, как сообщает код JQuery. Помогите?

Answer 1

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

<form action="do_upload.php" id="frmupload"> 
<input type="file" id="inpupload" style="display:none" /> 
<input type="button" id="btnupload" value="Upload Avatar" /> 
</form> 

Затем с помощью JQuery для запуска файла загрузки нажмите на кнопку мыши:

$(document.body).ready(function(){ 
    $("#btnupload").click(function(){ $("#inpupload").trigger("click"); }); 
    $("#inpupload").change(function(){ $("#frmupload").submit(); }); 
}); 

Готово! Вы также можете заменить функцию изменения inpupload на код загрузки ajax, если хотите.