php - 提交成功但上传在组合表单中不起作用

Question

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

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

<form id="oqc" enctype="multipart/form-data" >
    <input type="text" id="mod" name="mod" class="dt"/>
    <input type="text" id="no" name="no" class="dt"/>
    <input id="filename" name="uploadedfile" type="file" />
    <input type="submit" id="oqcsubmit" value="Submit" />
    <input type="hidden" name="action" value="oqcdata" />
</form>

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

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

更新

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

PHP Notice:  Undefined index: uploadedfile

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

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

score 2 · Accepted Answer

PHP Notice:  Undefined index: uploadedfile
这意味着表单不发送上传的文件值。检查参数后没有包含上传的文件。为什么会发生？

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

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

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

score 0 · Accepted Answer

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

一个例子：

Javascript /客户端：

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：

<input type="file" id="file_input_upload"/>
<div onmousedown="upload()">Upload my file</div>

PHP/服务器端（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

score 0 · Accepted Answer

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

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

<form id="oqc">
    <input type="text" id="mod" name="mod" class="dt"/>
    <input type="text" id="no" name="no" class="dt"/>
    <input type="submit" id="oqcsubmit" value="Submit" />
    <input type="hidden" name="action" value="oqcdata" />
</form>

<form enctype="multipart/form-data" action="uploader.php" method="POST"> 
    Upload File: <input id="filename" name="uploadedfile" type="file" />
    <input id="upload" type="submit" value="Upload File" style="display:none;"/>
</form>

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

score 0 · Accepted Answer

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

希望这可以帮助。

score 0 · Accepted Answer

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

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

score -2 · Accepted Answer

-2

通过 ajax 上传文件通过这个 url ajax 文件上传

于 2012-12-19T06:54:59.463 回答

php - 提交成功但上传在组合表单中不起作用

6 回答 6

Related

Reference