Wie ein Bild Server lokales Verzeichnis von Ajax PHP laden, wo HTML-Formular nicht traditionelle Taste

Question

HTML einreichen Form Codes (localhost/OEM/foo.html)

<form id="formUpload"> 
    <input id="photo" type="file"/> 
</form>` 
<div onclick='formSubmit()'> 
    Upload Photo Now 
</div> 

JS/JQuery Codes (inpage Skript)

<script> 
    $(document).ready(function(e){ 
    $('#formUpload').submit(function(e){ 
    e.preventDefault(); 
    $.ajax({ url:'/oem/response.php', 
     type: 'POST', data: new FormData(this), 
     contentType: false, cache:false, processData: false, 
    success: function(data){ 
     alert("Upload Successfully"); 
    } 
    }); 
    }); 
    }); 

    function formSubmit(){ 
    $('formUpload').submit();` 
    } 
</script> 

PHP Codes (localhost/oEM/response.php)

$sourcePath = $_FILES['file']['tmp_name']; 
$targetPath = "oem/images/".&_FILE['file']['name']; 
move_uploaded_file($sourcePath,$targetPath 
); 

Aber es wird nicht funktionieren, wie ich es wünsche, es zeigt mir eine leere Seite nach der Umleitung.

meine Frage: Was ist das Hauptproblem und wie man es löst?

Answer 1

Sie können nicht klassische Form submit mit Ajax mischen! Sie haben zwei Möglichkeiten:.

1. Verwenden klassische Form einreichen und $ ("Form") verwenden submit() wie Sie haben.

2. Verwenden Sie Ajax mit FormData. Wenn Sie die Seite nach Ajax ändern müssen, können Sie window.location.href verwenden.

Beispiel:

1) Klassik einreichen

$("button").click(function() { 
    $("form").submit(); // This will upload all fields and images in <input type='file'/> 
}); 

2) Ajax

FormData formData= new FormData(); 
data.append("image", $("#image-input").prop("files")[0]); 

$.ajax({..., data: formData, ...});