javascript 如何使用ajax jquery表单提交使用其他表单元素上传图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19394633/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to upload image with other form elements with ajax jquery form submit
提问by user2828701
UPDATE 10/16
Updated HTML
Updated AJAX
更新 10/16
更新 HTML
更新 AJAX
Attached 
随附的
Issue:The form technically "submits", however a) my form no longer refreshes itself which tells me my php file is not being called/executed properly and b) the info is not being posted to the DB. I think this has to do something with the conten-type: false, but I am not completely sure...
问题：表单技术上“提交”，但是 a) 我的表单不再自我刷新，这告诉我我的 php 文件没有被正确调用/执行，b) 信息没有发布到数据库。我认为这与 conten-type: false 有关系，但我不完全确定......
Let me start by saying, I've read and read about how to go about doing this. Some posts I've read this can't be done and then others prove them wrong. I tried to implement some examples, but for some reason all of the examples laid out do not work for me. I thought I'd see if someone can solve my specific issue.
首先让我说，我已经阅读并阅读了有关如何执行此操作的信息。我读过的一些帖子无法完成，然后其他帖子证明他们错了。我尝试实现一些示例，但由于某种原因，所有列出的示例都不适用于我。我想我会看看是否有人可以解决我的具体问题。
Essentially, I have a semi-html/jquery form that I post via AJAX. I did this because a) I essentially have 3 separate forms (not shown in this example) on the page and b) I need to return the same form to the page without reloading the page...
本质上，我有一个通过 AJAX 发布的半 html/jquery 表单。我这样做是因为 a) 我在页面上基本上有 3 个单独的表单（在这个例子中没有显示）和 b）我需要在不重新加载页面的情况下将相同的表单返回到页面......
My problem is that when I select my image and click on my button, the ajax DOES NOT send the image to PHP, although it does send the other fields. What am I doing wrong here? Any updates to my code would be most useful as again, I've attempted to implement several different answers in the past with no luck.
我的问题是，当我选择我的图像并单击我的按钮时，ajax 不会将图像发送到 PHP，尽管它确实发送了其他字段。我在这里做错了什么？对我的代码的任何更新都将是最有用的，因为我过去曾尝试实现几个不同的答案，但没有成功。
Any assistance would be MUCH MUCH appreciated. I am on the cusp of finishing this project and this is one of two major barriers for me.
任何帮助将不胜感激。我即将完成这个项目，这对我来说是两个主要障碍之一。
html(please forgive the inline styles...I haven't yet finished my CSS files)
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
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
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";
}
回答by Musa
Try this
试试这个
$(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
});
});
});
