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

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

更新

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

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并将表单提交给它。另一个技巧是使用实验File API，作为HTML5的一部分公开。这些可能是一个痛苦来处理你自己，但如果你想手动完成它，它应该可以正常工作。

我强烈建议使用第三方文件上传小部件。我很幸运Plupload，但有些人也推荐Uploadify。他们可以选择使用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：

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

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/。它将任何形式包装到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;
                 }
     });

<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>

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

Answer 6

通过ajax上传文件请浏览此网址ajax file uploading

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

6 个答案: