如何使用ajax jquery表单提交上传具有其他表单元素的图像

Question

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

附

问题：从技术上讲，该表单“提交”，但是a）我的表单不再刷新，这表明我的php文件未正确调用/执行，b）信息未发布到数据库。 我认为这与conten类型有关：false，但是我不确定。

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

本质上，我有一个通过AJAX发布的Semi-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";
}

Answer 1

尝试这个

$(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
        });
    });
});