任意の伝統的な送信ボタン

Question

HTMLフォーム・コード（ローカルホスト/ OEM/foo.htmlという）

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

JS/jQueryのコード（インページ・スクリプト）

<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コード（ローカルホスト/ OEM/response.php）

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

しかし、私が望むように動作しません。リダイレクト後に空白のページが表示されます。

私の質問：主な問題は何ですか？どのように解決するのですか？

Answer 1

クラシックフォームとajaxを混在させることはできません！ 次の2つのオプションがあります。

1. 使用古典的なフォーム送信と$（「フォーム」）を使用し、あなたが行ったように（）を提出。

2. FormDataでajaxを使用します。 ajax の完了後にページを変更する必要がある場合は、window.location.hrefを使用できます。

例：

1）クラシック

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

2）アヤックス

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

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