Upload img-ohne mit submit-button oder rederict in PHP & AJAX

Dies könnte Aussehen wie ein Duplikat, aber ich habe nicht gefunden, etwas, das passt zu meinen Bedürfnisse genau doch. Ich möchte ein Bild hochladen auf einen Ordner einfach durch Auswahl einer Datei in der Datei-browser, ohne submit-button verwendet (so weit so gut, ich kann dies tun). Aber dann will ich die user nicht umgeleitet werden, die zu upload.php - Datei. So brauche ich zum senden einer Datei ohne Verwendung von submit-button und nicht umleiten der Benutzer zu einer anderen Seite. Eine Aktualisierung ist ok, aber bevorzugt ohne refresh.. Dies ist, was ich jetzt haben, und meine Frage ist, ob dies getan werden könnte, in PHP,AJAX & Javascript oder ob ich gehen sollte für ein JQuery plugin?

UND ich habe mehrere Formulare, so bin ich nicht mit ID-tag

Mein code bisher nicht funktioniert zu 100%, nur wenn ich das hochladen und weiterleiten an upload.php :

<form action="upload.php" method="post" enctype="multipart/form-data">
  <input type="file" name="fileToUpload" class="test">
</form>

    $(".test").change(function() { 
        $.ajax({
            url: "upload.php",
            type: "post",
            dataType: 'json',
            processData: false,
            contentType: false,
            data('file', $(this[0].files[0])),
            success: function(text) {
                    alert("successfully");
            }
        });   
    });

UPLOAD.PHP

<?php if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], "uploads/myfile.jpg")) {
    echo "The file ". basename( $_FILES["fileToUpload"]["name"]). " has been uploaded.";
 } else {
    echo "Sorry, there was an error uploading your file.";
     }
 }?>

2 Antworten

  • Almis
    15. Juni 2015

    Ich schlage vor, Sie verwenden die jQuery-File-Upload , denn es kümmert sich um browser-Versionen und Betriebssysteme-Kompatibilität Probleme. Wenn Sie don ' T brauchen etwas fortgeschrittene Lesen Sie diese Dokumentation

    Code aus dem obigen link

    <!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery File Upload Example</title>
</head>
<body>
<input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>
<script>
$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p/>').text(file.name).appendTo(document.body);
            });
        }
    });
});
</script>
</body> 
</html>

    Bearbeitet basierend auf OP Kommentar:

    $(function () {
    $('.fileuploads').each(function(i, obj){
        $(obj).fileupload({
            dataType: 'json',
            done: function (e, data) {
                $.each(data.result.files, function (index, file) {
                    $('<p/>').text(file.name).appendTo(document.body);
                });
            }
        });
    });
});
  • Sawan Dhanotiya
    15. Juni 2015

    Sie können verwenden Sie die folgende Methode ohne button klicken und die Seite aktualisieren Datei hochladen.

    <form id="uploadform" target="upiframe" action="upload.php" method="post" enctype="multipart/form-data">
  <input type="file" name="fileToUpload" class="test" onchange="yourFunction()">
</form>

<iframe id="upiframe" name="upiframe" witdh="0px" height="0px" border="0" style="width:0; height:0; border:none;"></iframe>


function yourFunction() {
    var form = document.getElementById('uploadform');
    form.submit();
  });
}