Question

更新10月16日
更新了HTML
更新了AJAX

附加 screenshot screenshot2

问题：表单在技术上“提交”，但是a）我的表单不再刷新本身告诉我我的php文件没有正确调用/执行b）信息没有发布到DB。我认为这必须与conten-type做一些事情：false，但我不完全确定......

首先让我说，我已经阅读并阅读了如何去做这件事。我读过的一些帖子无法完成，然后其他人证明它们是错误的。我试图实现一些例子，但由于某些原因，所有列出的例子都不适用于我。我以为我会看看是否有人可以解决我的具体问题。

基本上，我有一个半html / jquery表单，我通过AJAX发布。我这样做是因为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
        });
    });
});

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

1 个答案: