php - フォームの入力ファイルだけでファイルを送信し、他のフィールドでは送信しない方法は?

php jquery html ajax

調子はどう?

画像をアップロードするためのajax-jqueryフォームの作成については、インターネットに多くの例があります。このような:

<form id="imageform" method="post" enctype="multipart/form-data" action='ajaximage.php'> 
<input type="file" name="photoimg" id="photoimg" />
</form>


このフォームにファイルをアップロードさせるのはそれほど難しくありませんが、何か他のものが必要です。

それより少し大きいフォルムがあります。

例:

<form id="imageform" method="post" enctype="multipart/form-data" action='ajaximage.php'> 
<input type="file" name="photoimg" id="photoimg" />
<input type="text" name="foo"/>
<input type="text" name="bar"/>
<input type="submit" value="FINALLY DO THE SUBMIT"/>
</form>


大したことは何ですか?

さて、ファイル入力フィールドにファイルのonchangeイベントのアップロードを実行してもらいます。しかし、私はホールフォームが提出することを望んでいません。実行する必要のある他のフィールドがあり、結局ユーザーは最終的な送信を行います。

私はそれをバックエンドで行うには問題ありません。私のPHPエンジンは待機していて機能していますが、フロントエンドでそれを行う方法についてのアイデアはありません。

何か提案はありますか?
答え
target要素の<form>属性を使用して、ページを再ロードせずにフォームを送信できます。追加のフィールドは引き続き送信されますが、<form>actionなどのenctype属性を動的に交換することで、ファイル入力がバックエンドのポイントに送信されるようにすることができます。

AJAXアップローダーをすばやくセットアップできるようにする簡単なJavaScript + jQueryコンポーネントを作成しました。これは属性の変更を自動的に処理し、バックエンドがフロントエンドでコールバックをトリガーできるようにします。

var uploader = {

    functionBegin: function () {},
    functionCallback: function () {},

    formID: '',
    formAction: '',

    buttonID: '',

    originalAction: '',
    originalTarget: '',
    originalEnctype: '',
    originalOnSubmit: '',

    isSetup: false,

    // Initializes the AJAX uploader
    init: function(formID, buttonID, formAction, beginFunction, callbackFunction) {

        // Sets up the optional callback functions
        this.functionBegin = beginFunction;
        this.functionCallback = callbackFunction;

        // Sets up the selectors and upload form atributes
        this.formID = formID;
        this.buttonID = buttonID;
        this.formAction = formAction;

        // If we haven't already, create the invisible IFRAME that our form will target
        if(!this.isSetup) {
            $(formID).append('<iframe id="AU_IFrame" name="AU_IFrame" src="about:blank" style="width:0;height:0;border:0px solid #fff;"></iframe>');
            this.isSetup = true;
        }

        // If a button selector was defined, we hook it's click event
        if(buttonID) {
            $(buttonID).click(function () {
                uploader.triggerBegin();
                return false;
            });
        }

    },

    // Begins the file upload
    triggerBegin: function() {

        // Backs up the original form attributes
        this.originalAction = $(this.formID).attr('action');
        this.originalTarget = $(this.formID).attr('target');
        this.originalEnctype = $(this.formID).attr('enctype');
        this.originalOnSubmit = $(this.formID).attr('onSubmit');

        // Sets up the form with our upload attributes
        $(this.formID).attr('action', this.formAction);
        $(this.formID).attr('target', 'AU_IFrame');
        $(this.formID).attr('enctype', 'multipart/form-data');

        // Call our 'on upload begin' callback, if defined
        if(this.functionBegin) {
            this.functionBegin();
        }

        // Submit the upload form
        $(this.formID).submit();

        // Now that it's already uploaded, revert back to the original attributes
        $(this.formID).attr('action', this.originalAction);
        $(this.formID).attr('target', this.originalTarget);
        $(this.formID).attr('enctype', this.originalEnctype);
        $(this.formID).attr('onSubmit', this.originalOnSubmit);

    },

    // This can be called from the back-end, will trigger the user-defined callback
    triggerCallback: function(params) {
        if(this.functionCallback) {
            this.functionCallback(params);
        }
    }


};


これをHTMLフォームに適用する方法の例を次に示します。

<form name="test" method="POST" action="regularForm.php">
    <input id="fileInput" name="fileInput" type="file" />
    <input type="text" name="foo" />
    <input type="text" name="bar" />
    <input type="submit" value="Send" />
</form>

<script type="text/javascript">
    $(function () {

        uploader.init(
            '#fileInput', // File field selector
            null, // Upload button selector (Optional, since we'll upload on change, this won't be needed here)
            'fileUpload.php', // Upload action
            function () { // Callback on upload begin (optional)
                alert("Starting upload!");
            }, 
            function (params) { // Callback on upload end/error (called by the back-end, optional)
                alert("Upload successful");
            }
        );

        $('#fileInput').change( upload.triggerBegin ); // automatically upload on file input change

    });
</script>


コールバックを適切にトリガーするには、バックエンドで次のコードが実行されることを確認してください(PHPを使用している場合)。

$someParameter = "whatever you want to return in the callback";

echo '<script type="text/javascript">';
echo 'if(top.uploader && top.uploader.triggerCallback) { top.uploader.triggerCallback("'.$someParameter.'"); }';
echo '</script>';


ファイルのURL、アップロードのステータス、サイズなどを返すように、パラメータを自然に調整できます。

他のソリューションと同様に、HTML5を使用しない場合の唯一の代替策は、ファイルの選択とアップロードを処理するFlash / Silverlight / JavaアプレットまたはGoogle Gearsプラグインを使用することです。段階的なフォールバックとしてすべての選択肢を実装するjQueryプラグインがたくさんあります。


jqUploader
Uploadify
SWFUpload
In-a-Flash Uploader
関連記事

php - 開発環境のhttps環境/ SSL証明書をシミュレートするにはどうすればよいですか?

php - php-時間差を取得する

php - サーバー間で一貫性のないセッションのシリアル化

php - PHPのVB ifステートメント

php - PHP配列の組み合わせ-1対多

php - jquery添付ファイル付きの電子メールを送信

php - アプリケーションを含む最後のブラウザタブが閉じていることを検出するにはどうすればよいですか?

php - カウンターのbatch_mutate

php - PHP-Facebook、Google、Twitterを使用したログインを許可する簡単な方法

php - カレンダーテーブルを使用して、日付範囲クエリの不足しているギャップを埋める