Slyweb
На разработку сайта! Скидки 50%!

AJAX загрузка файлов (на сервер)

Вы можете задавать любые вопросы по jQuery.

AJAX загрузка файлов (на сервер)

Сообщение Vild » 03 май 2013, 20:38

нагуглил много информации - это возможно,
задача немного сужается ослом (IE)
( не использовать HTML5)

Все заработало, но не полностью закачивается файл (ошибка 3 - $_FILES)

вот запрос - то что формирует скрипт для отправки

    Content-type: multipart/form-data
    Content-Length: 140

    --boundary
    Content-Disposition: form-data; name="userfile"; filename="0_61518_eb89d400_orig.jpg"
    Content-Type: image/jpeg
    Content-Length: 2280972

    --boundary--



то что получаем


    Connection Keep-Alive
    Content-Length 306
    Content-Type text/html; charset=utf-8
    Date Fri, 03 May 2013 15:32:49 GMT
    Keep-Alive timeout=5, max=100
    P3P CP="NOI ADM DEV PSAi COM NAV OUR OTRo STP IND DEM"
    Server Apache/2.2.22 (Win32) mod_ssl/2.2.22 OpenSSL/1.0.1c PHP/5.3.13
    X-Powered-By PHP/5.3.13


    Заголовки запроса
    Accept */*
    Accept-Encoding gzip, deflate
    Accept-Language ru-ru,ru;q=0.8,en-us;q=0.5,en;q=0.3
    Connection keep-alive
    Content-Length 222
    Content-Type multipart/form-data; charset=UTF-8; boundary=boundary
    Cookie f3db512a3ff7fe11c6520833ed95ac93=56p9nulnvt7iun912en7gi3iu5
    Host j1525
    User-Agent Mozilla/5.0 (Windows NT 5.1; rv:11.0) Gecko/20100101 Firefox/11.0
    X-Requested-With XMLHttpRequest


Как возможно это исправить?



отталкиваясь о этой информации http://chxo.com/be2/20050724_93bf.html


собрал скрипт

JavaScript
Код: Выделить всё
   $(':file').change(function(e){
   e.preventDefault();
   var file = this.files[0];
          var filename = file.name;
          var   size = file.size;
          var mimetype = file.type;

         var delimiter = "boundary";
         var header = "Content-type: multipart/form-data\r\n";
         var boundary = "--"+delimiter+"\r\n";
         
         var   body = 'Content-Disposition: form-data; name="userfile"; filename="' + filename + '"\r\n';
            body += 'Content-Type: ' + mimetype +'\r\n';
            //body += 'Content-Transfer-Encoding: binary\r\n';
            body += 'Content-Length: ' + size + '\r\n\r\n';
               
         var footer = "--"+delimiter+"--";
         var Content_Length = "Content-Length: " + body.length +"\r\n\r\n";
         
         console.log(header+Content_Length+boundary+body+footer);

         

   $.ajax({
                        url: 'http://site/index.php?option=savef',
                        type: 'POST',
                        data: header+Content_Length+boundary+body+footer,
                  contentType:"multipart/form-data; boundary="+delimiter,
                  success: function(data) {
                     console.log( data );
                        }
                    });

 });



HTML

    <form name="addproduct" method="post" action="" >
    <input type="hidden" name="MAX_FILE_SIZE" value="30000" />
    Выберите файл <input name="userfile" id="userfile" type="file" />
    </form>



PHP
Код: Выделить всё

    print_r($_FILES);

Vild
 
Сообщения: 1
Зарегистрирован: 03 май 2013, 20:16

Re: AJAX загрузка файлов (на сервер)

Сообщение Lionline » 15 май 2013, 08:13

Форма:
Код: Выделить всё
        <form name="form5" enctype="multipart/form-data" method="post" action="upload.php" />
            <p><input type="file" size="32" name="my_field" value="" id="xhr_field" /></p>
            <div id="xhr_status"></div>
            <p class="button"><input type="hidden" name="action" value="xhr" />
            <input type="submit" name="Submit" value="upload" id="xhr_upload"/></p>
        </form>
        <div id="xhr_result"></div>

JS код:
Код: Выделить всё
<script type="text/javascript">

    window.onload = function () {

      function xhr_send(f, e) {
        if (f) {
          xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){
              document.getElementById(e).innerHTML = xhr.responseText;
            }
          }
          xhr.open("POST", "upload.php?action=xhr");
          xhr.setRequestHeader("Cache-Control", "no-cache");
          xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
          xhr.setRequestHeader("X-File-Name", f.name);
          xhr.send(f);
        }
      }

      function xhr_parse(f, e) {
        if (f) {
          document.getElementById(e).innerHTML = "File selected : " + f.name + "(" + f.type + ", " + f.size + ")";
        } else {
          document.getElementById(e).innerHTML = "No file selected!";
        }
      }

      function dnd_hover(e) {
        e.stopPropagation();
        e.preventDefault();
        e.target.className = (e.type == "dragover" ? "hover" : ""); 
      }

      var xhr = new XMLHttpRequest();

      if (xhr && window.File && window.FileList) {

        // xhr example
        var xhr_file = null;
        document.getElementById("xhr_field").onchange = function () {
          xhr_file = this.files[0];
          xhr_parse(xhr_file, "xhr_status");
        }
        document.getElementById("xhr_upload").onclick = function (e) {
          e.preventDefault();
          xhr_send(xhr_file, "xhr_result");
        }

        // drag and drop example
        var dnd_file = null;
        document.getElementById("dnd_drag").style.display = "block";
        document.getElementById("dnd_field").style.display = "none";
        document.getElementById("dnd_drag").ondragover = function (e) {
          dnd_hover(e);
        }
        document.getElementById("dnd_drag").ondragleave = function (e) {
          dnd_hover(e);
        }
        document.getElementById("dnd_drag").ondrop = function (e) {
          dnd_hover(e);
          var files = e.target.files || e.dataTransfer.files;
          dnd_file = files[0];
          xhr_parse(dnd_file, "dnd_status");
        }
        document.getElementById("dnd_field").onchange = function (e) {
          dnd_file = this.files[0];
          xhr_parse(dnd_file, "dnd_status");
        }
        document.getElementById("dnd_upload").onclick = function (e) {
          e.preventDefault();
          xhr_send(dnd_file, "dnd_result");
        }

      }
    }
</script>

upload.php:
Код: Выделить всё
<?php

  error_reporting(E_ALL);

  include('class.upload.php');

  $dir_dest =  'test'; //cоздать папку test на сервере

  if ((isset($_POST['action']) ? $_POST['action'] : (isset($_GET['action']) ? $_GET['action'] : '')) == 'xhr') {
    if (isset($_SERVER['HTTP_X_FILE_NAME']) && isset($_SERVER['CONTENT_LENGTH'])) {
        $handle = new Upload('php:'.$_SERVER['HTTP_X_FILE_NAME']); 
    }
    else { 
      $handle = new Upload($_FILES['my_field']);       
    }
    if ($handle->uploaded) {
        $handle->Process($dir_dest);
        if ($handle->processed) {
            echo '<p>';
            echo '  <b>Файл загружен</b><br />';
            echo '  Файл: <a href="'.$dir_dest.'/' . $handle->file_dst_name . '">' . $handle->file_dst_name . '</a>';
            echo '   (' . round(filesize($handle->file_dst_pathname)/256)/4 . 'KB)';
            echo '</p>';
        }
        else {
          echo '<p>';
          echo '  <b>Файл не загружен</b><br />';
          echo '  Ошибка: ' . $handle->error . '';
          echo '</p>';
        }
        $handle-> Clean();

    }
    else {
      echo '<p>';
      echo '  <b>Файл не загружен</b><br />';
      echo '  Ошибка: ' . $handle->error . '';
      echo '</p>';
  }
 
?>
Lionline
 
Сообщения: 1
Зарегистрирован: 15 май 2013, 07:54


Вернуться в Вопросы по jQuery

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 0

cron