✔ Ajax File Upload will nicht!

H

HoneyKing

Grünschnabel
Hallo
Ich habe eine Problem. Wenn ich eine datei hochladen will. Dann zeigt er mir die Progressbar an aber er macht dann einfach nicht weiter? Was habe ich vergessen oder wo ist der Fehler?

PHP: 
<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
 ?>
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <title>File Upload</title>
  <link href="/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <?php
  if(isset($_POST["submit"])) {
    $uploadOk = 1;
    if(!empty($_FILES)){
      $scrPath = $_FILES["uploadFile"]["tmp_name"];
      $trgpath = "/uploads/dateien/".$_FILES["uploadFile"]["name"];
      if (file_exists($trgpath)) {
          echo "<div class=\"alert alert-danger\">
          <strong>Fehler!</strong>Datei existiert schon.</div>";
          $uploadOk = 0;
      }
      if ($uploadOk == 0) {
          echo "<div class=\"alert alert-danger\">
          <strong>Fehler!</strong>Bild wurde nicht hochgeladen.</div>";
      } else {
        if(is_uploaded_file($_FILES["uploadFile"]["tmp_name"])){
          if(move_uploaded_file($srcPath,$trgPath)){
            echo '<img src="'.$trgPath.'" width="300" height="250"/>';
          }
        }
      }
    }
  }
  ?>
  <div style="width:500px;margin:25px auto;">
    <form id="uploadForm" method="post" action="fu.php">
      <div class="form-group">
        <label>File Upload</label>
        <input type="file" name="uploadFile" id="uploadFile" />
      </div>
      <div class="form-group">
        <input type="submit" id="uploadSubmit" value="Hochladen" class="btn btn-success" />
      </div>
      <div class="progress" style="display:none" id="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
      </div>
      <div id="tragetLayer"></div>
    </form>
    <div id="loader-icon" style="display:none"><img src="/images/ajax-loader.gif" /></div>
  </div>

<script src="/plugins/jquery/jquery.min.js"></script>
<script src="/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="/plugins/jquery/jquery.form.js"></script>


<script>
$(document).ready(function(){
  $('#uploadForm').submit(function(e){
    if($('#uploadFile').val()){
      e.preventDefault()
      $('#loader-icon').show()
      $(this).ajaxSubmit({
        target:   '#targetLayer',
        beforeSubmit: function(){
          $('#progress').show();
          $('.progress-bar').width('0%');
        },
        //Wieso macht er ab hier nix mehr?
        uploadProgress: function (event, position, total, percentComplete){
          $('.progress-bar').width(percentComplete + '%');
          $('.progress-bar').html('<div id="progress-bar-status">' + percentComplete +' %</div>')
        },
        success: function(){
          $('#loader-icon').hide();
          $('#progress').hide();
        },
        resetForm: true
      });
      return false;
    }
  });
});
</script>
</body>
</html>

Brauch da mal hilfe

MfG
 
Ich finde es ja übersichtlicher, wenn die PHP-Datei, die beim Ajax aufgerufen wird, getrennt ist. Das HTML macht beim Ajax keinen Sinn.
Wenn Du mit Ajax hoch lädst, ist $_POST["submit"] nicht gesetzt.
 
Sempervivum hat gesagt.:
Ich finde es ja übersichtlicher, wenn die PHP-Datei, die beim Ajax aufgerufen wird, getrennt ist. Das HTML macht beim Ajax keinen Sinn.
Wenn Du mit Ajax hoch lädst, ist $_POST["submit"] nicht gesetzt.
Zum Vergrößern anklicken....
Okay ich weiß aber nicht wie ich das machen soll bei links die so ausehen domian.tld/kategorie/titel/bla
Dann ist er mir immer in falschen pfad gewechselt und halt page not found
Sempervivum hat gesagt.:
Nach Bau einer Testkonfiguration:
Schreibfehler scrPath vs srcPath und trgpath vs. trgPath
Zum Vergrößern anklicken....

Ups .....
Habs geändert aber geht immer noch nicht :(

PHP: 
<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
 ?>
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <title>File Upload</title>
  <link href="/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <?php
  if(isset($_POST["submit"])) {
    $uploadOk = 1;
    if(!empty($_FILES)){
      $srcPath = $_FILES["uploadFile"]["tmp_name"];
      $trgPath = "/uploads/dateien/".$_FILES["uploadFile"]["name"];
      if (file_exists($trgPath)) {
          echo "<div class=\"alert alert-danger\">
          <strong>Fehler!</strong>Datei existiert schon.</div>";
          $uploadOk = 0;
      }
      if ($uploadOk == 0) {
          echo "<div class=\"alert alert-danger\">
          <strong>Fehler!</strong>Bild wurde nicht hochgeladen.</div>";
      } else {
        if(is_uploaded_file($_FILES["uploadFile"]["tmp_name"])){
          if(move_uploaded_file($srcPath,$trgPath)){
            echo '<img src="'.$trgPath.'" width="300" height="250"/>';
          }
        }
      }
    }
  }
  ?>
  <div style="width:500px;margin:25px auto;">
    <form id="uploadForm" method="post" action="fu.php">
      <div class="form-group">
        <label>File Upload</label>
        <input type="file" name="uploadFile" id="uploadFile" />
      </div>
      <div class="form-group">
        <input type="submit" id="uploadSubmit" value="Hochladen" class="btn btn-success" />
      </div>
      <div class="progress" style="display:none" id="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
      </div>
      <div id="tragetLayer"></div>
    </form>
    <div id="loader-icon" style="display:none"><img src="/images/ajax-loader.gif" /></div>
  </div>

<script src="/plugins/jquery/jquery.min.js"></script>
<script src="/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="/plugins/jquery/jquery.form.js"></script>


<script>
$(document).ready(function(){
  $('#uploadForm').submit(function(e){
    if($('#uploadFile').val()){
      e.preventDefault()
      $('#loader-icon').show()
      $(this).ajaxSubmit({
        target:   '#targetLayer',
        beforeSubmit: function(){
          $('#progress').show();
          $('.progress-bar').width('0%');
        },
        //Wieso macht er ab hier nix mehr?
        uploadProgress: function (event, position, total, percentComplete){
          $('.progress-bar').width(percentComplete + '%');
          $('.progress-bar').html('<div id="progress-bar-status">' + percentComplete +' %</div>')
        },
        success: function(){
          $('#loader-icon').hide();
          $('#progress').hide();
        },
        resetForm: true
      });
      return false;
    }
  });
});
</script>
</body>
</html>
 
Einfach die Abfrage löschen. Du fragst ja später ab auf
Code: 
!empty($_FILES)
Das sollte eigentlich genügen. Das Problem stellt sich nicht, wenn Du das PHP in eine getrennte Datei legst.
 
Okay das habe ich gemacht hat aber nix geändert.
Hab jetzt auch wieder in 2 Datein gemacht
index.php
HTML: 
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <title>File Upload</title>
  <link href="/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div style="width:500px;margin:25px auto;">
    <form id="uploadForm" method="post" action="upload.php">
      <div class="form-group">
        <label>File Upload</label>
        <input type="file" name="uploadFile" id="uploadFile" />
      </div>
      <div class="form-group">
        <input type="submit" id="uploadSubmit" value="Hochladen" class="btn btn-success" />
      </div>
      <div class="progress" id="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
      </div>
      <div id="tragetLayer"></div>
    </form>
    <div id="loader-icon" style="display:none"><img src="/images/ajax-loader.gif" /></div>
  </div>

<script src="/plugins/jquery/jquery.min.js"></script>
<script src="/plugins/bootstrap/js/bootstrap.js"></script>
<script src="/plugins/jquery/jquery.form.js"></script>


<script>
$(document).ready(function(){
  $('#uploadForm').submit(function(e){
    if($('#uploadFile').val()){
      e.preventDefault()
      $('#loader-icon').show()
      $(this).ajaxSubmit({
        target:   '#targetLayer',
        beforeSubmit: function(){
          $('.progress-bar').width('0%');
        },
        uploadProgress: function (event, position, total, percentComplete){
          $('.progress-bar').width(percentComplete + '%');
          $('.progress-bar').html('<div id="progress-bar-status">' + percentComplete +' %</div>')
        },
        success: function(){
          $('#loader-icon').hide();
          $('#progress').hide();
        },
        resetForm: true
      });
      return false;
    }
  });
});
</script>
</body>
</html>
upload.php
PHP: 
<?php
  if(!empty($_FILES)){
  $uploadOk = 1;
  $srcPath = $_FILES["uploadFile"]["tmp_name"];
  $trgPath = "/uploads/dateien/".$_FILES["uploadFile"]["name"];
  if (file_exists($trgPath)) {
      echo "<div class=\"alert alert-danger\">
      <strong>Fehler!</strong>Datei existiert schon.</div>";
      $uploadOk = 0;
  }
  if ($uploadOk == 0) {
      echo "<div class=\"alert alert-danger\">
      <strong>Fehler!</strong>Bild wurde nicht hochgeladen.</div>";
  } else {
    if(is_uploaded_file($_FILES["uploadFile"]["tmp_name"])){
      if(move_uploaded_file($srcPath,$trgPath)){
        echo '<img src="'.$trgPath.'" width="300" height="250"/>';
      }
    }
  }
}
?>
Problem ist
Ich suche mir eine Datei zum upload aus klicke dann auf Hochladen. Dann kommt ja wie ich es will die Processbar und das Loader bild. Aber mehr passiert nix. Process bar bleibt bei 0 und macht nix weiter.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück