9

送信とアップロードを1つのフォームに組み合わせようとすると、アップロードに問題がありますが、送信フォームの場合は問題ありません。

JQuery + Ajax：

$("#oqcsubmit").click(function() {
    if($("#oqc").valid()) {
            var params=$("#oqc").serialize();
                $.ajax({
                    type:"post",
                        url:"doinput.php",
                        data:params,
                        cache :false,
                        async :false,
                        success : function() {
                            $(".dt").val("");
                                $(".stat").val("");
                                return this;
                                },
                        error : function() {
                            alert("Data failed to input.");
                                }
                        });
                 return false;
                 }
     });

<form id="oqc" enctype="multipart/form-data" >
    <input type="text" id="mod" name="mod" class="dt"/>
    <input type="text" id="no" name="no" class="dt"/>
    <input id="filename" name="uploadedfile" type="file" />
    <input type="submit" id="oqcsubmit" value="Submit" />
    <input type="hidden" name="action" value="oqcdata" />
</form>

PHP：

$dbc=mysql_connect(_SRV,_ACCID,_PWD) or die(_ERROR15.": ".mysql_error());
$db=mysql_select_db("QPL",$dbc) or die(_ERROR17.": ".mysql_error());

$target_path = "data/";

$target_path = $target_path . basename( $_FILES['uploadedfile']['name']);
//print_r($_FILES);
        if(move_uploaded_file($_FILES['uploadedfile']['tmp_name'], $target_path)) {
                echo "The file ". basename( $_FILES['uploadedfile']['name']). " has been uploaded";
                }
        else{
                echo "There was an error uploading the file, please try again!";
                }

switch(postVar('action')) {
        case 'oqcdata' :
                oqcdata(postVar('mod'),postVar('no'));
                break;
        }

function oqcdata($mod,$no) {

        $Model          = mysql_real_escape_string($mod);
        $Serial         = mysql_real_escape_string($no);

//build query
  $sql = "INSERT INTO OQC (Model, Serial) VALUES ('".$Model."','".$Serial."')";
echo $sql;
$result=mysql_query($sql) or die(_ERROR26.": ".mysql_error());
echo $result;
mysql_close($dbc);

このページにアップロードコードを正しく配置する方法は？両方が機能する可能性があります。ディレクトリ権限：chmod 777 data

ファイルは送信後（送信ではなく）フォームに残されます。 ファイルの遅延

アップデート

切り替え前にアップロードコードを移動した後、次のエラーが発生しました。

PHP Notice:  Undefined index: uploadedfile

これは、フォームが値を送信しないことを意味しuploadedfileます。パラメータを確認した後、含まれていませんuploadedfile。なぜそれが起こるのですか？この値もフォーム内に含まれ、を使用し.serialize()ます。

form data :
mod:KD-R321ED
no:177X1000          // where is the uploaded file value?
action:oqcdata
4

6 に答える 6

2 
PHP Notice:  Undefined index: uploadedfile

これは、フォームがアップロードされたファイルの値を送信しないことを意味します。パラメータを確認した後、uploadedfileは含まれていません。なぜそれが起こるのですか？

jQueryが使用するような、バニラクロスブラウザajaxを介してファイルをアップロードすることはできません。ピリオド、終止符、ストーリーの終わり。

ページを更新せずにアップロードを行う必要がある場合、一般的なトリックは、を作成iframeしてフォームを送信することです。もう1つのトリックは、HTML5の一部として公開されている実験的なFileAPIを使用することです。これらは自分で処理するのが面倒な場合がありますが、すべてを手作業で実行したい場合はうまくいくはずです。

これには、サードパーティのファイルアップロードウィジェットを使用することを強くお勧めします。私はPluploadで運が良かったのですが、 Uploadifyを勧める人もいます。どちらもオプションでFlashまたはHTML5バックエンドを使用してアップロードを実行できます。これにより、ユーザーは小さな進捗メーターを利用できます。

于 2012-12-20T05:46:07.833 に答える
0

$.ajaxだけでファイル入力データを送信することはできません。jQueryフォームプラグインhttp://malsup.com/jquery/form/を正常に使用しました。任意のフォームをAJAX処理にラップし、多くの便利なコールバックオプションを追加します。また、ファイルのアップロードを処理するためにいくつかの巧妙なことを行います。古いブラウザー（XHRレベル2をサポートしていない）の場合、サーバー側で非常に小さな変更が加えられる可能性がありますが、それ以外の場合はそのままで機能します。

jQueryフォームを使用してファイルのアップロードを処理するための特定のドキュメントについては、http：//malsup.com/jquery/form/#file-uploadを参照してください。

于 2012-12-20T10:43:52.753 に答える
0

AJAXを介してファイルをアップロードするには、XHR2を使用する必要があります。

例 ：

Javascript /クライアントサイド：

function upload() {
    var fileInput = document.getElementById('file_input_upload'); 
    var file = fileInput.files[0];        

    xhr = new XMLHttpRequest();

    xhr.open('post', 'upload.php', true);
    xhr.setRequestHeader("Content-Type", "application/octet-stream");
    xhr.setRequestHeader("Cache-Control", "no-cache");  
    xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");  
    xhr.setRequestHeader("X-File-Name", file.name);  
    xhr.setRequestHeader("X-File-Size", file.size);  
    xhr.setRequestHeader("X-File-Type", file.type);   
    xhr.send(file);
}

HTML：

<input type="file" id="file_input_upload"/>
<div onmousedown="upload()">Upload my file</div>

PHP /サーバーサイド（upload.php）：

$file_name = $_SERVER['HTTP_X_FILE_NAME'];
$file_size = $_SERVER['HTTP_X_FILE_SIZE'];
file_put_contents(
            "data/" . $file_name, 
            file_get_contents("php://input")
        );

これは、エラーチェックのない単純な例です。したがって、このコードを本番環境で使用しないでください。また、大きなファイル（GB単位）をアップロードする場合は、webworkersを使用する必要があります

于 2012-12-20T06:39:04.647 に答える
0

Uploadifyを使用して、ファイルのアップロードを処理できます。「onUploadSuccess」コールバック関数を提供します。アップロードされたファイル情報（ファイル名、パスなど）を取得できる場所から。その情報を使用して、フォームの非表示の入力フィールドを更新できます。そして、サーバー側の情報にアクセスして操作することができます。

お役に立てれば。

于 2012-12-20T10:29:50.907 に答える
0

別のプロセスで、単純な方法を使用する方が良いです：

$("#oqcsubmit").click(function() {
    if($("#oqc").valid()) {
            var params=$("#oqc").serialize();
                $.ajax({
                    type:"post",
                        url:"doinput.php",
                        data:params,
                        cache :false,
                        async :false,
                        success : function() {
                            $(".dt").val("");
                                $(".stat").val("");
                                return this;
                                },
                        error : function() {
                            alert("Data failed to input.");
                                }
                        });
                 return false;
                 }
     });

<form id="oqc">
    <input type="text" id="mod" name="mod" class="dt"/>
    <input type="text" id="no" name="no" class="dt"/>
    <input type="submit" id="oqcsubmit" value="Submit" />
    <input type="hidden" name="action" value="oqcdata" />
</form>

<form enctype="multipart/form-data" action="uploader.php" method="POST"> 
    Upload File: <input id="filename" name="uploadedfile" type="file" />
    <input id="upload" type="submit" value="Upload File" style="display:none;"/>
</form>

どちらも正常に機能します。簡単な方法が実行できる場合は、複雑な方法を実行しないのが最善の方法です。

于 2012-12-21T03:57:28.067 に答える
-2

ajaxを介してファイルをアップロードするには、このURLを参照してください。ajaxファイルのアップロード

于 2012-12-19T06:54:59.463 に答える