2

おはよう、

私は自分の問題に対する答えを求めて、運がなかったのであちこち検索しました。jquery を使用したいのですが、「通常の」Javascript を試してみましたが、ほとんど成功しませんでした。

目標
ajax (非同期) 経由でファイル (txt) を消費する php サーバーにファイル (1 つだけ) をアップロードしたいと思います。

問題
スクリプトは php スクリプトを呼び出さず、ファイルもアップロードしません。JavaScript エラーはなく、スクリプトが正常に実行されていることがわかります。chrome では、process.php はネットワーク セクションに表示されないため、スクリプトによるものなのか、php 内のエラーによるものなのかわかりません。

一般情報
ブラウザ: Chrome バージョン 26.0.1410.64 m
wamp サーバー (php、mysql)
レイアウト用のブートストラップ

コード
インデックス:

<div class="span12" id="upload_form_div" style="display: block;">
    <form id="upload_form" enctype="multipart/form-data" class="upload_form">
        <fieldset>
            <legend>
                Please select a file to parse and merge with the database.
            </legend>
            <p>
                <label for="files">File:</label>
                <input type="file" class="text" id="files" name="file">
            </p>
            <p>
                <input type="button" value="Start Parse">
            </p>
        </fieldset>
    </form>
</div>

jquery.js、app.js (アップロード用のスクリプト ファイル)、bootstrap.min.js を含めます。完全な html マークアップを表示する必要はないと思っただけです。

スクリプト ファイル:

$(function(){
$("#progressbar").hide();
});


function showProgress(evt) {
if (evt.lengthComputable) {
    var percentComplete = (evt.loaded / evt.total) * 100;
    $('#progressbar').progressbar("option", "value", percentComplete );
}
}

$(':button').click(function(){
var fileIn = $("#files")[0];
//Has any file been selected yet?
if (fileIn.files === undefined || fileIn.files.length == 0) {
    alert("Please select a file");
    return;
}

//We will upload only one file
var file = fileIn.files[0];
console.log(file);
//Show the progress bar
$("#progressbar").show();


$.ajax({
    url: 'process.php',  //server script to process data
    type: 'POST',
    data: file,
    contentType: file.type,
    processData: false,
    success: function(){
        $("#progressbar").hide();
    },
    error: function(){
        $("#progressbar").hide();
        alert("Failed");
        //alert(xhr.responseText);
    },
    xhr: function() {  // custom xhr
        myXhr = $.ajaxSettings.xhr();
        if(myXhr.upload){ // check if upload property exists
            //myXhr.upload.addEventListener('progress',showProgress, false); // for handling the progress of the upload
            //console.log($.ajaxSettings.xhr().upload);
            console.log(myXhr.responseText);
        } else {
            console.log("Upload progress is not supported.");
        }

        return myXhr;
    }
});
});

これは単純なコピペなので、トラブルシューティング行の一部をコメントアウトしました.

PHP

<?php
set_error_handler("E_ALL");
$upload_directory = "files/";
move_uploaded_file($_FILES['file']['tmp_name'], $upload_directory . $_FILES['file']['name']);
?>

php ファイルはさらに多くのことを行いますが、この時点でファイルをアップロードしようとしています。

より多くの情報が必要な場合はお知らせください。情報を提供するために最善を尽くします。

4

2 に答える 2

0

しばらく経ちましたが、問題の解決策を見つけました。正直なところ、jQuery フォーム プラグインを使用していて、$_FILES[] が実際に $_POST[] と一緒に送信されていることに気付いたときに、偶然これを思いつきました。XMLHttpRequest も必要ありません。以下は私のコードです。

Javascript

function saveForm(){
    $("#saveButton").button('loading');
    $("#MyForm").ajaxSubmit({
        url: 'save_script.php',
        type: 'post',
        success: function(responce){
            $("#saveButton").button('reset');
            rebuild_attachments();
        }
    });
};

#saveButton はフォームを保存するためにクリックしたボタンの ID であり、#MyForm は送信するフォームの ID です。また、ブートストラップ ボタンを使用して送信ボタンを読み込み状態に変更し、大きなファイルがアップロードされた場合に複数回クリックできないようにしています。成功のコールバックは、保存ボタンを元の状態に戻して、フォームを再度送信できるようにします。これは複数のファイルにも対応しています。

「rebuild_attachments()」は、フォーム内にある div を新しい項目がある場合は再構築する別の .ajax 要求を行う、私が呼び出す関数です。Javaスクリプトテンプレートなど、これを処理するためのより良い方法があることはわかっていますが、現時点ではこの方法が機能します。

于 2013-06-13T10:58:45.083 に答える