[解決済み] jQuery AJAX ファイルアップロード PHP

質問

イントラネットのページに簡単なファイルアップロードを実装したいのですが、できるだけ小さなセットアップでお願いします。

これは私のHTML部分です。

<input id="sortpicture" type="file" name="sortpic" />
<button id="upload">Upload</button>

そして、これは私のJS jqueryスクリプトです。

$("#upload").on("click", function() {
    var file_data = $("#sortpicture").prop("files")[0];   
    var form_data = new FormData();
    form_data.append("file", file_data);
    alert(form_data);
    $.ajax({
        url: "/uploads",
        dataType: 'script',
        cache: false,
        contentType: false,
        processData: false,
        data: form_data,                         
        type: 'post',
        success: function(){
            alert("works"); 
        }
    });
});

ウェブサイトのルートディレクトリに "uploads" という名前のフォルダがあり、 "users" と "IIS_users" の変更権限を持っています。

ファイルフォームでファイルを選択してアップロードボタンを押すと、最初のアラートは "[オブジェクト FormData]" を返します。2番目のアラートは呼び出されず、" uploads" フォルダも空になっています！？

誰か、何が問題なのかを見つけるのを手伝ってくれませんか？

また、次のステップでは、サーバー側で生成された名前でファイル名を変更する必要があります。多分、誰かがこのための解決策も教えてくれるでしょう。

どのように解決するのですか？

アップロードディレクトリにファイルを移動させるために、サーバー上で実行するスクリプトが必要です。その jQuery ajax メソッド (ブラウザのクライアント側で実行) がフォームのデータをサーバーに送信し、サーバー上で実行されているスクリプトがアップロードを処理します。

HTMLは問題ありませんが、JSのjQueryスクリプトをこのように更新してください。

(の後のコメントを探してください。 // <-- )

$('#upload').on('click', function() {
    var file_data = $('#sortpicture').prop('files')[0];   
    var form_data = new FormData();                  
    form_data.append('file', file_data);
    alert(form_data);                             
    $.ajax({
        url: 'upload.php', // <-- point to server-side PHP script 
        dataType: 'text',  // <-- what to expect back from the PHP script, if anything
        cache: false,
        contentType: false,
        processData: false,
        data: form_data,                         
        type: 'post',
        success: function(php_script_response){
            alert(php_script_response); // <-- display response from the PHP script, if any
        }
     });
});

そして、サーバーサイドのスクリプトです。 PHP この場合

upload.php : サーバー上に配置され実行される PHP スクリプトで、ファイルを uploads ディレクトリに誘導します。

<?php

    if ( 0 < $_FILES['file']['error'] ) {
        echo 'Error: ' . $_FILES['file']['error'] . '<br>';
    }
    else {
        move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name']);
    }

?>

あと、保存先ディレクトリについていくつか。

1. を確認してください。 正しいサーバーパス つまり、PHPスクリプトの場所から始まって、アップロードディレクトリへのパスが何であるか、そして
2. それが 書き込み可能 .

そして、PHPの関数について少し move_uploaded_file で使用されている upload.php スクリプトを使用します。

move_uploaded_file(

    // this is where the file is temporarily stored on the server when uploaded
    // do not change this
    $_FILES['file']['tmp_name'],

    // this is where you want to put the file and what you want to name it
    // in this case we are putting in a directory called "uploads"
    // and giving it the original filename
    'uploads/' . $_FILES['file']['name']
);

$_FILES['file']['name'] はアップロードされた時のファイル名です。これを使う必要はありません。サーバーファイルシステムと互換性のある）任意の名前を付けることができます。

move_uploaded_file(
    $_FILES['file']['tmp_name'],
    'uploads/my_new_filename.whatever'
);

そして最後に、PHPを意識すること upload_max_filesize AND post_max_size の設定値を変更し、テストファイルがそのいずれかを超えていないことを確認してください。以下は、その方法についてのヘルプです。 PHPの設定を確認する と、どのように 最大ファイルサイズと投稿の設定 .