jQuery AJAXファイルアップロードPHP

159

最小限の設定で、イントラネットページに簡単なファイルアップロードを実装したいと思います。

これは私の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」の変更権限があります。

ファイル形式のファイルを選択してアップロードボタンを押すと、最初のアラートで「[object FormData]」が返されます。2番目のアラートは呼び出されず、「uploads」フォルダも空です！？

誰かが私の問題を見つけるのを手伝ってくれる？

また、次のステップは、サーバー側で生成された名前でファイルの名前を変更することです。多分誰かも私にこれに対する解決策を与えることができます。

javascript  php  jquery  ajax  upload 
— user2355509
ソース
：この最初の読みくださいstackoverflow.com/questions/166221/...
— ヴィンセントDecaux
すべてがうまくいきます。多分それはあなたのPHPコードですか？
— Korikulum 2014年
このフォームに「接続」されているものは他にありません。私のphpコードとはどういう意味ですか？
— user2355509 2014年
つまり、コードは機能しますが、サーバー側のコードに問題がある可能性があります。
— Korikulum
AJAXスクリプトを実行すると500エラーコードが表示されますか？これは、サーバー側のエラーであることを示します。また、デバッグ中に、PHPファイルの応答をコンソールに出力するようにしてください。そうすることで、PHPコードがエラーをスローした場合、何が起こっているかがわかります。
— Diederik、2014年

回答:

285

ファイルをアップロードディレクトリに移動するには、サーバーで実行するスクリプトが必要です。jQuery ajaxメソッド（ブラウザーで実行中）がフォームデータをサーバーに送信し、サーバー上のスクリプトがアップロードを処理します。PHPを使用した例を次に示します。

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スクリプト：

<?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スクリプトの場所から、uploadsディレクトリへのパスを指定します。
  2. 書き込み可能であることを確認してください。

そしてmove_uploaded_file、upload.phpスクリプトで使用される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とpost_max_size設定値に注意し、テストファイルがどちらを超えないようにします。ここでは、PHPの設定を確認する方法と、最大ファイルサイズと投稿設定を設定する方法について説明します。

— 流血のナックル
ソース
ねえブラディナックルズ！おかげで、これは大きな問題だったと思います。だから私はphpファイルを追加しました、そして今私は少し近づきました。2番目のアラートもポップアップします。しかし、フォルダはまだ空です。
— user2355509 2014年
あ、フォーム入力名「sortpic」がform_data.append関数内で「file」に変更されています。そこで、新しいフォーム入力名を反映するようにPHPスクリプトを変更しました。また、デバッグを支援するために、PHPスクリプト応答をajax成功アラートにプルしました。
— bloodyKnuckles、2014年
1
バディ、それは私にエラーの未定義のインデックスファイルを与えます$_FILES['file']
— Hendry Tanaka
1
@partho、コードprop（ 'files'）[0]は、サーバーへのアップロードを目的としたローカルファイルにアクセスします。さらに説明が必要な場合は、jQuery関数「prop」と「html5ファイルのアップロード」を参照してください。
— bloodyKnuckles、2015
1
この問題を解決しました。その理由は、ファイルサイズが大きすぎたためです。
— ron tornambe
4 
**1. index.php**
<body>
    <span id="msg" style="color:red"></span><br/>
    <input type="file" id="photo"><br/>
  <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
      $(document).on('change','#photo',function(){
        var property = document.getElementById('photo').files[0];
        var image_name = property.name;
        var image_extension = image_name.split('.').pop().toLowerCase();

        if(jQuery.inArray(image_extension,['gif','jpg','jpeg','']) == -1){
          alert("Invalid image file");
        }

        var form_data = new FormData();
        form_data.append("file",property);
        $.ajax({
          url:'upload.php',
          method:'POST',
          data:form_data,
          contentType:false,
          cache:false,
          processData:false,
          beforeSend:function(){
            $('#msg').html('Loading......');
          },
          success:function(data){
            console.log(data);
            $('#msg').html(data);
          }
        });
      });
    });
  </script>
</body>

**2.upload.php**
<?php
if($_FILES['file']['name'] != ''){
    $test = explode('.', $_FILES['file']['name']);
    $extension = end($test);    
    $name = rand(100,999).'.'.$extension;

    $location = 'uploads/'.$name;
    move_uploaded_file($_FILES['file']['tmp_name'], $location);

    echo '<img src="'.$location.'" height="100" width="100" />';
}
— ハシブ・カマル
ソース
2 
var formData = new FormData($("#YOUR_FORM_ID")[0]);
$.ajax({
    url: "upload.php",
    type: "POST",
    data : formData,
    processData: false,
    contentType: false,
    beforeSend: function() {

    },
    success: function(data){




    },
    error: function(xhr, ajaxOptions, thrownError) {
       console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
    }
});
— アズハル
ソース
0

そしてこれはuplaodedファイルを受け取るためのphpファイルです

<?
$data = array();
    //check with your logic
    if (isset($_FILES)) {
        $error = false;
        $files = array();

        $uploaddir = $target_dir;
        foreach ($_FILES as $file) {
            if (move_uploaded_file($file['tmp_name'], $uploaddir . basename( $file['name']))) {
                $files[] = $uploaddir . $file['name'];
            } else {
                $error = true;
            }
        }
        $data = ($error) ? array('error' => 'There was an error uploading your files') : array('files' => $files);
    } else {
        $data = array('success' => 'NO FILES ARE SENT','formData' => $_REQUEST);
    }

    echo json_encode($data);
?>
— カベフム
ソース
何しif (true)てるの？常にtrueと評価されるので、役に立たないのではないでしょうか。また、余分なエンドカーリーがあります。
— Mr.Web 2017年
修正しました。:)
— Mr.Web 2017年
0

純粋なjsを使用する

async function saveFile() 
{
    let formData = new FormData();           
    formData.append("file", sortpicture.files[0]);
    await fetch('/uploads', {method: "POST", body: formData});    
    alert('works');
}
<input id="sortpicture" type="file" name="sortpic" />
<button id="upload" onclick="saveFile()">Upload</button>
<br>Before click upload look on chrome>console>network (in this snipped we will see 404)
スニペットを展開

ファイル名は自動的にリクエストに含まれ、サーバーはそれを読み取ることができます。「content-type」は自動的に「multipart / form-data」に設定されます。エラー処理と追加のjson送信を使用したより開発された例を次に示します

コードスニペットを表示

— カミル・キエチェフスキー
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.