Блог

Я понимаю, что SO выступает за то, чтобы мы провели наше исследование, прежде чем задавать вопросы, но я не уверен, как сформулировать это по-другому, поэтому я решил спросить напрямую —

На самом деле я пытаюсь сделать что-то простое — загрузить файл, но когда я выбираю «выбрать» в браузере файлов, он просто перенаправляет на страницу PHP, на которой отображается соответствующее сообщение об ошибке (поскольку ничего не было загружено).

Был бы очень признателен, если бы вы могли объяснить процесс загрузки файла. Вот мой код:

 HTML
 

Простая форма

 <form action = "./php/upload_avatar.php" method = "POST" enctype = "multipart/form-data">
    <div class = "change-avatar-text">
        改变头像
    </div>      
    <!-- hidden button trick -->
    <input type = "file" name = "file" id = "change-avatar-input"/>
        <button type = "submit" class = "change-avatar" onclick = "fake_photo('change-avatar-input')"></button>
</form>
 

http://i.stack.imgur.com/6d2U4.png

Onclick — это просто способ использовать фотографию в качестве кнопки файла вместо традиционной кнопки. Я не думаю, что это актуально, поэтому я опустил его здесь.

 PHP
 

Код загружаемого файла

 if (file_exists("../avatars/" . $_FILES["file"]["name"])) {
    echo $_FILES["file"]["name"] . " already exists. ";
} else {
    move_uploaded_file($_FILES["file"]["tmp_name"], "../upload/" . $_FILES["file"]["name"]);
}
 

Произошли две вещи: когда я попытался нажать кнопку загрузки на HTML-странице, она вернула «уже существует», но в папке ../avatars/ ничего нет.

http://i.stack.imgur.com/DG8Vm.png

Затем я попытался закомментировать все, кроме move_uploaded_file , и ничего не произошло.

Был бы признателен за ваш совет по этому поводу, спасибо!

Обновить

 JS 
 

Вот функция поддельной фотографии:

 function fake_photo(element_id) {
    document.getElementById(element_id).click();
}
 

Вы не препятствуете выполнению действия формы по умолчанию в вашем методе onclick. Но это не единственная проблема, поскольку вы используете кнопку отправки в качестве триггера для запуска процесса выбора файла, вам нужно будет повторно отправить форму после выбора изображения.

HTML

 <form id="myform" action="./php/upload_avatar.php" method="POST" enctype="multipart/form-data">
    <input type="file" name="file" id="change-avatar-input" onchange="onFileChanged()"/>
    <button type="submit" id="submitBtn" class="change-avatar" onclick="fake_photo('change-avatar-input',event)"></button>
</form>
 

Javascript

 var hasChosenFile = false;
function fake_photo(element_id,event){
   //If hasChosenFile is false then we want
   //to prevent the default action of the form
   if(!hasChosenFile){
      event.preventDefault();
      document.getElementById(element_id).click();
   }
   //Else let the form submit.
}

function onFileChanged(){
   hasChosenFile = true;
   document.getElementById('myform').submit()
}