提交成功，但上传不能以组合forms工作

在尝试将提交和上传组合在一个表单中时，我在上传时遇到问题，但对于提交表单，这没问题。

JQuery + Ajax：

$("#oqcsubmit").click(function() { if($("#oqc").valid()) { var params=$("#oqc").serialize(); $.ajax({ type:"post", url:"doinput.php", data:params, cache :false, async :false, success : function() { $(".dt").val(""); $(".stat").val(""); return this; }, error : function() { alert("Data failed to input."); } }); return false; } }); 
       

PHP：

 $dbc=mysql_connect(_SRV,_ACCID,_PWD) or die(_ERROR15.": ".mysql_error()); $db=mysql_select_db("QPL",$dbc) or die(_ERROR17.": ".mysql_error()); $target_path = "data/"; $target_path = $target_path . basename( $_FILES['uploadedfile']['name']); //print_r($_FILES); if(move_uploaded_file($_FILES['uploadedfile']['tmp_name'], $target_path)) { echo "The file ". basename( $_FILES['uploadedfile']['name']). " has been uploaded"; } else{ echo "There was an error uploading the file, please try again!"; } switch(postVar('action')) { case 'oqcdata' : oqcdata(postVar('mod'),postVar('no')); break; } function oqcdata($mod,$no) { $Model = mysql_real_escape_string($mod); $Serial = mysql_real_escape_string($no); //build query $sql = "INSERT INTO OQC (Model, Serial) VALUES ('".$Model."','".$Serial."')"; echo $sql; $result=mysql_query($sql) or die(_ERROR26.": ".mysql_error()); echo $result; mysql_close($dbc); 

如何在这个页面中正确放置上传代码？ 所以两者都可以工作。 目录权限： chmod 777 data

---

提交后，文件在表单中留下（不发送）。

---

UPDATE

在切换之前移动上传代码后我得到了错误：

 PHP Notice: Undefined index: uploadedfile 

这意味着表单不发送uploadedfile值。 检查参数后，没有包含uploadedfile 。 为什么会这样？ 即使这个值包含在表单中并使用.serialize() 。

 form data : mod:KD-R321ED no:177X1000 // where is the uploaded file value? action:oqcdata 

Answer 1

 PHP Notice: Undefined index: uploadedfile 

这意味着表单不发送uploadfile值。 检查参数后，没有包含上传文件。 为什么会这样？

您不能通过vanilla跨浏览器ajax上传文件 ，例如jQuery使用的文件。 期间，句号，故事结束。

如果您必须在没有页面刷新的情况下进行上传，常见的诀窍是创建一个iframe并将表单提交给它。 另一个技巧是使用实验文件API ，作为HTML5的一部分公开。 这些对于处理自己来说可能是一种痛苦 ，但如果您想要手动完成这些操作，它应该会很好用。

我强烈建议您使用第三方文件上传小部件。 我对Plupload很幸运，但也有人推荐上传 。 他们可以选择使用Flash或HTML5后端来执行上传，这也为用户提供了一个快乐的小进度表。

Answer 2

您应该使用XHR2通过AJAX上传文件。

一个例子 ：

Javascript / Clientside：

 function upload() { var fileInput = document.getElementById('file_input_upload'); var file = fileInput.files[0]; xhr = new XMLHttpRequest(); xhr.open('post', 'upload.php', true); xhr.setRequestHeader("Content-Type", "application/octet-stream"); xhr.setRequestHeader("Cache-Control", "no-cache"); xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); xhr.setRequestHeader("X-File-Name", file.name); xhr.setRequestHeader("X-File-Size", file.size); xhr.setRequestHeader("X-File-Type", file.type); xhr.send(file); } 

HTML：

  
Upload my file 

PHP / Serverside（upload.php）：

 $file_name = $_SERVER['HTTP_X_FILE_NAME']; $file_size = $_SERVER['HTTP_X_FILE_SIZE']; file_put_contents( "data/" . $file_name, file_get_contents("php://input") ); 

这是一个没有任何错误检查的简单示例。 所以请不要将此代码用于生产用途。 如果您想上传大文件（以GB为单位），您应该使用webworkers

Answer 3

您可以使用Uploadify来处理文件上载。 它提供“ onUploadSuccess ”回调函数。 从哪里可以获得上传的文件信息（文件名，路径等）。 您可以使用该信息并更新表单中的隐藏输入字段。 然后，您可以访问服务器端的信息并对其进行操作。

希望这可以帮助。

Answer 4

仅通过$ .ajax发送文件输入数据是不可能的。 我已经成功使用了jQuery表单插件http://malsup.com/jquery/form/ 。 它将任何forms包装到AJAX处理中，并添加了许多有用的回调选项。 它还有一些聪明的东西来处理文件上传。 对于较旧的浏览器（不支持XHR Level 2），可能会有一些非常小的额外服务器端修改，但除此之外它可以开箱即用。

有关使用jQuery表单处理文件上载的特定文档，请参阅http://malsup.com/jquery/form/#file-upload

Answer 5

更好的是使用简单的方法，使用单独的过程：

 $("#oqcsubmit").click(function() { if($("#oqc").valid()) { var params=$("#oqc").serialize(); $.ajax({ type:"post", url:"doinput.php", data:params, cache :false, async :false, success : function() { $(".dt").val(""); $(".stat").val(""); return this; }, error : function() { alert("Data failed to input."); } }); return false; } }); 
     
 
 Upload File:    

两者都可以正常工作，最好的方法是不做复杂的方法，如果简单的方法可以做到。

Answer 6

通过ajax上传文件请通过此url ajax文件上传