0

jQuery を使用してマルチファイル ファイル アップローダを作成したいと考えています。

以下は私が取り組んでいるコードです。jQuery（およびファイルAPI）とPHPを使用して、複数のファイルを一度にアップロードするための本質を抽象化しようとしています。誰かが簡単な答えを持っている場合は、自由に共有または提案してください。

ただし、現在、このコードは画像をアップロードするために機能します（ちょっと）。問題があります：

  1. 複数のファイルを選択した後でも、ディレクトリにアップロードされるファイルは 1 つだけです。
  2. フォームは送信時にページを変更します

これが私が取り組んでいるjs/jqueryです：

function html5Upload($form) {
    file = $form.data('input');
    if (file) {
        var fd = new FormData();
        fd.append($form.find(selector).attr('name'), file);
        //get other form input and append to formData
        $form.find(':input').each(function () {
            if (this.type != 'file') {
                fd.append($(this).attr('name'), $(this).val());
            }
        });

        //Upload using jQuery AJAX
        jqxhr = $.ajax({
            url: $form.attr('action'),
            data: fd,
            cache: false,
            contentType: false,
            processData: false,
            type: 'POST',
            success: function () {
                alert("Images Uploaded!");
            }
        });
    }

    $form.remove();
}


$('form').submit(function (event) {
    event.preventDefault();
    html5Upload($('form.mupload'));
    return false;
});

HTML

<form class="mupload" action="upload.php" method="post" enctype="multipart/form-data">
    <input type="file" name="userfile" class="fileUpload" multiple>

    <button type="submit">Upload</button>
</form>

PHP

/*
Easy PHP Upload - version 2.32
A easy to use class for your (multiple) file uploads

Copyright (c) 2004 - 2010, Olaf Lederer
*/
include("easy_upload/upload_class.php");

$upload = new file_upload();

$upload->upload_dir = 'uploads/';
$upload->extensions = array('.png', '.jpg', '.zip', '.pdf'); // specify the allowed extensions here
$upload->rename_file = true;


if(!empty($_FILES)) {
    $upload->the_temp_file = $_FILES['userfile']['tmp_name'];
    $upload->the_file = $_FILES['userfile']['name'];
    $upload->http_error = $_FILES['userfile']['error'];
    $upload->do_filename_check = 'y'; // use this boolean to check for a valid filename
    if ($upload->upload()){

        echo '<div id="status">success</div>';
        echo '<div id="message">'. $upload->file_copy .' Successfully Uploaded</div>';
        //return the upload file
        echo '<div id="uploadedfile">'. $upload->file_copy .'</div>';

    } else {

        echo '<div id="status">failed</div>';
        echo '<div id="message">'. $upload->show_error_string() .'</div>';

    }
}
4

1 に答える 1

1

これまでにいくつかの潜在的な問題を見てきました。

  1. アップロードされたファイルは1つだけです。

    • 複数のファイルをアップロードする場合name、ファイル入力の属性はのようになりますuserfiles[]。このように、それは上書きされません。参考：2つのHTML入力の名前が同じで、がない[]場合は、後者のみがリクエストを介して送信されます。（Arrayを考えてみてください。$_ POSTでは配列として表されます）[]など、複数の値を持つデータを送信するためにも使用できます。select
    • アップロードハンドラーはよくわかりませんが、複数のファイルのアップロードを処理できると思いますか？

  2. form？の前にスクリプトタグを含めたと思います。イベントコードをjQuerydomReady内に配置してみてください

。

$(function() {
     $('form').submit(function (event) {
        event.preventDefault();
        html5Upload($('form.mupload'));
        return false;
    });
});

最初にこの問題を確認することをお勧めします。

于 2012-08-27T12:55:32.337 に答える