0

更新 10/16
更新了 HTML
更新了 AJAX

随附的截屏 截图2

问题：从技术上讲，表单“提交”，但是 a) 我的表单不再自我刷新，这告诉我我的 php 文件没有被正确调用/执行，并且 b) 信息没有被发布到数据库。我认为这与内容类型有关：false，但我不完全确定......

首先让我说，我已经阅读并阅读了有关如何执行此操作的信息。我读过的一些帖子无法完成，然后其他帖子证明它们是错误的。我试图实现一些示例，但由于某种原因，所有列出的示例都不适合我。我想我会看看是否有人可以解决我的具体问题。

本质上，我有一个通过 AJAX 发布的半 html/jquery 表单。我这样做是因为 a）我在页面上基本上有 3 个单独的表单（本示例中未显示），并且 b）我需要在不重新加载页面的情况下将相同的表单返回到页面......

我的问题是，当我选择图像并单击按钮时，ajax 不会将图像发送到 PHP，尽管它会发送其他字段。我在这里做错了什么？对我的代码的任何更新都将是最有用的，我过去曾尝试实现几个不同的答案，但没有运气。

任何帮助将不胜感激。我即将完成这个项目，这对我来说是两个主要障碍之一。

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 回答