Форум PHP программистов > Как загрузить файл без кнопки submit

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Полная Версия: Как загрузить файл без кнопки submit

Страницы: 1, 2, 3

AllesKlar

25.04.2014 - 15:28

Google Chrome
Apple Safari 4.0+
Mozilla Firefox 3.0+
Opera 11.0+
Microsoft Internet Explorer 6.0+

и куча ответов на типичные вопросы по этому плагину http://stackoverflow.com/questions/tagged/...ery+file-upload

_____________
[продано копирайтерам]

Иван444

26.04.2014 - 07:13

Цитата (killer8080 @ 25.04.2014 - 10:37)

Цитата (Иван444 @ 25.04.2014 - 04:32)

а есть что нибудь для чайников? я вообще просто там ничего не могу понять, там никаких объяснений, никаких подробностей и вообще непонятно что там и как.

там вроде и так все просто)))

Цитата (Иван444 @ 25.04.2014 - 04:32)

Там даже в примере кнопки нет,

там загрузка автоматом после выбора файла. Если нужно именно с кнопкой, все элементарно переделывается
index.html

Свернутый текст

<pre class="sh_sourceCode" rel="js"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<title>xhr.send(FormData) Example</title>
</head>
<body>
<p>
<progress max="100" value="0" style="display: none;"></progress>
</p>
<form method="post" action="" enctype="multipart/form-data" id="myform">
<input type="text" name="user" />
<input type="file" id='ff' name="pic" /> >
<input type="button" onclick="upload()" value="тыц" />

</form>
<div id="resp"></div>
<script>
function upload() {
var progress = document.querySelector('progress');
var fd = new FormData(document.getElementById('myform'));
var xhr = new XMLHttpRequest();
xhr.open('POST', 'handle_file_upload.php', true);

xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
progress.value = (e.loaded / e.total) * 100;
}
};

xhr.onload = function() {
if (this.status == 200) {
var resp = JSON.parse(this.response);

document.querySelector('#resp').innerHTML = '<pre>'+resp.POST+'</pre><pre>'+resp.FILES+'</pre>';
setTimeout(function(){progress.style.display = 'none';}, 500)
};
};
progress.style.display = 'block';
progress.value = 0;
xhr.send(fd);

}

</script>

</body>
</html></pre>

handle_file_upload.php

Свернутый текст

<pre class="sh_sourceCode" rel="php"><?php

$json = json_encode(array(
'POST' => print_r($_POST, 1),
'FILES' => print_r($_FILES, 1)
));

echo $json;</pre>

только учти что этот код будет работать только в новых браузерах, с поддержкой html5. Для старых нужны костыли в виде ифреймов или флеша.

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

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


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<title>xhr.send(FormData) Example</title>
</head>
<body>
<p>
<progress max="100" value="0" style="display: none;"></progress>    // эта строка в которой будет отображаться процентность загрузки
</p> 
<form method="post" action="" enctype="multipart/form-data"  id="myform">
<input type="text" name="user" />
<input type="file" id='ff' name="pic" /><br />
<input type="button" onclick="upload()" value="тыц" />

</form>
<div id="resp"></div>
<script>
function upload() {
   var progress = document.querySelector('progress');     // сюда попадает вот этот элемент насколько я понимаю <progress ></progress>
   var fd = new FormData(document.getElementById('myform')); // сюда попадает все чем заполнена форма
   var xhr = new XMLHttpRequest();   //вот эта штука нужна чтобы подготовить все данные к отправке 
   xhr.open('POST', 'handle_file_upload.php', true);  // здесь мы указываем метод отправки, файл обработчик данных  и что то связанное с синхронностью и асинхронностью отправки всех этих данных
 
  xhr.upload.onprogress = function(e) {  //вот эта штука не знаю, что означает, но так понимаю, что это каким то образом работает когда файл грузится и полоса загрузки идет
    if (e.lengthComputable) {
      progress.value = (e.loaded / e.total) * 100;
    }
  };
 
  xhr.onload = function() {   // это заработает когда вся страница загрузится
    if (this.status == 200) {    //  если страница загрузилась без ошибок(наверное) то что то делается ниже я не знаю что 
      var resp = JSON.parse(this.response);  // выводил тут алертом, написано какой то объект тоже не знаю что это, вот это вот искал this.response и не нашел что означает   (((
 
      
      document.querySelector('#resp').innerHTML = '<pre>'+resp.POST+'</pre><pre>'+resp.FILES+'</pre>'; // голова уже болит, я понимаю что тут выбирается объект с ид ('#resp') и в нем выводятся два массива с данными, но я не могу найти элемент с таким ид #resp  (((


      setTimeout(function(){progress.style.display = 'none';}, 500) // здесь скрывается вот этот блок <progress ></progress>
    };
  };
  progress.style.display = 'block';  // это не знаю для чего  
  progress.value = 0;  // это не знаю для чего  
  xhr.send(fd);  // это отправляет все данные формы в обработчик 
}

</script>

</body>
</html>

щас умру уже :(

Быстрый ответ:

Здесь расположена полная версия этой страницы.