0

UPDATE 10/16
HTML
を更新 AJAX を更新

添付スクリーンショット スクリーンショット2

問題:フォームは技術的には「送信」されますが、a) フォームが更新されなくなり、php ファイルが適切に呼び出されていないか実行されていないことがわかります。b) 情報が DB に投稿されていません。これは content-type: false で何かをしなければならないと思いますが、完全にはわかりません...

まず、これを行う方法について読み、読みました。私がこれを読んだいくつかの投稿は実行できませんが、他の投稿はそれらが間違っていることを証明しています. いくつかの例を実装しようとしましたが、何らかの理由でレイアウトされたすべての例が機能しません。誰かが私の特定の問題を解決できるかどうかを確認したいと思いました。

基本的に、AJAX 経由で投稿するセミ html/jquery フォームがあります。これを行ったのは、a) 基本的にページに 3 つの個別のフォーム (この例には示されていません) があり、b) ページをリロードせずに同じフォームをページに戻す必要があるためです...

私の問題は、画像を選択してボタンをクリックすると、他のフィールドは送信されますが、ajax は画像を PHP に送信しないことです。ここで何が間違っていますか？私のコードへの更新は最も役に立ちます。過去にいくつかの異なる回答を実装しようとしましたが、うまくいきませんでした。

どんな援助でも大歓迎です。私はこのプロジェクトを完成させようとしていますが、これは私にとって 2 つの大きな障壁の 1 つです。

html (インライン スタイルを許してください...まだ CSS ファイルを完成させていません)

<div style="position: relative; float: left; width:275px;">
<div id="valuebox" style="position: relative; float: left; width:275px; border: solid #0096D6; border-width: 1px; padding: 10px;">
<H2>Step 3: Enter Value Level Data</H2>
 <form enctype="multipart/form-data">
 <span style="position: relative; float: left; display: inline-block; margin-top: 7px; font: 12px Lucida Grande,Helvetica,Arial,Verdana,sans-serif; padding-right: 60px;">
<p>Add Value Challenger Screenshot:</p>
<input id="file" type="file" name="valueimage">
</span>
<span style="float: left; clear: right; margin-top:8px; padding-top: 10px; width: 235px;">
<label class="fieldlabel"><span>Value Lift (%):</span></label></br>
 <input id="valuelift" type="text" name="valuelift" class="textfieldshadowsmall" style="width: 150px;">
</span>
<span style="position: relative; float: left; margin-top: 25px; font: 12px Lucida Grande,Helvetica,Arial,Verdana,sans-serif;">
<input id="valuesignificant" type="checkbox" name="valuesignificant" value="1">Significant?
</span>
<span style="position: relative; float: left; margin-top: 25px; font: 12px Lucida Grande,Helvetica,Arial,Verdana,sans-serif;">
<input id="valuewinningcreative" type="checkbox" name="valuewinningcreative" value="1">Winning Creative?
</span>
 </form>
</div>
<span style="position: relative; float: left; margin-top: 25px; font: 12px Lucida Grande,Helvetica,Arial,Verdana,sans-serif;">
<a href="#" id="valuesubmit" />+ add another value</a>
</span>
</form>
</div>

jquery/ajax

$(function(){
  $('#valuesubmit').click(function(event) {
var formData = new FormData($('form')[0]);

$.ajax({
    url: 'post_value_dummy.php',  //Server script to process data
    type: 'POST',
    xhr: function() {  // Custom XMLHttpRequest
        var myXhr = $.ajaxSettings.xhr();
        //if(myXhr.upload){ // Check if upload property exists
           // myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // For handling the progress of the upload
        //}
        return myXhr;
    },
    // Form data
    enctype: 'multipart/form-data',
    data: formData,
    //Options to tell jQuery not to process data or worry about content-type.
    cache: false,
    contentType: false,
    processData: false
});
});
});

php

//This is the directory where images will be saved
$target = "/screenshots/";
$target = $target . basename($_FILES[valueimage][name]);

$picchallengervalue=($_FILES['valueimage']['name']);


$con=mysqli_connect("x","y","z","a");
// Check connection
if (mysqli_connect_errno())
  {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
  }


$sql="INSERT INTO value (valueimage, valuelift, valuesignificant, valuewinningcreative, variableid)
VALUES
('$picchallengervalue','$_POST[valuelift]','$_POST[valuesignificant]','$_POST[valuewinningcreative]','$_POST[variableid]')";


//some php that sends the same form back to the browser - code not necessary to show

if(move_uploaded_file($_POST[valueimage][tmp_name], $target))
{
echo "ok";
}
4

1 に答える 1

5

これを試して

$(function(){
    $('#valuesubmit').click(function(event) {
        var formData = new FormData($('form')[0]); // okay I just saw the form, assuming there is only one form on the page
        $.ajax({
            url: 'post_value_dummy.php',  //Server script to process data
            type: 'POST',
            /* This is just looks like bloat
            xhr: function() {  // Custom XMLHttpRequest
                var myXhr = $.ajaxSettings.xhr();
                //if(myXhr.upload){ // Check if upload property exists
                   // myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // For handling the progress of the upload
                //}
                return myXhr;
            },*/
            // Form data
            // enctype: 'multipart/form-data',  <-- don't do this       
            data: formData,
            //Options to tell jQuery not to process data or worry about content-type.
            //cache: false, post requests aren't cached
            contentType: false,
            processData: false
        });
    });
});
于 2013-10-17T02:10:38.613 に答える