Question

我正在尝试使用ajax上传文件。

form enctype="myltipart/form-data" id="pastTest-form" method="POST" action="upload.php">
            <div class="feedback-form-inputs col-5">
                <div class="input-field">
                    <select id="type" required>
                        <option value="quiz">Quiz</option>
                        <option value="midterm">Midterm</option>
                        <option value="final">Final</option>
                    </select>
                </div>
                <div class="input-field">
                    <input type="text" id="professor"/>
                </div>
                <div class="input-field">
                    <input type="text" id="name"/>
                </div>
                <div class="input-field">
                    <input type="file" id="uploaded_file" name="file" accept="" required />
                </div>
            </div><!-- END feedback-form-inputs -->
            <div class="clear"></div>
                <input type="submit" value="submit" onclick="submit() />
                <div id="upload-status"> </div>
            </form>

我打开ajax的功能在外部文件中。

function addPastTest1(cid){
    // form variables
    var type = _("type").value;
    var professor = _("professor").value;
    var name = _("name").value;

    var fileSelect = _('uploaded_file');
    var status = _('upload-status');
    event.preventDefault();
    // Update status text.
    status.innerHTML = 'Uploading...';
    // Get the selected files from the input.
    var file = fileSelect.files[0];

    var FileName = file.name;
    var FileSize = file.size;
    var allowed = ["msword", "pdf","pages"];
    var found = false;
    // check if the extension of the file match the allowed ones
    allowed.forEach(function(extension) {
        if (file.type.match('application/'+extension)) {
          found = true;
        }
    })
    if (FileSize >10204){
        status.innerHtml = 'File must be less than 1mb in size';
    }
    if (found==true){
        // Create a new FormData object.
        var formData = new FormData();
        // Add the file to the request.
        formData.append('file', file, FileName);
        // Set up the request.
        var ajax = ajaxObj("POST", "ajaxResponse.php");
        ajax.onreadystatechange = function(){
            if (ajaxReturn(ajax)==true){
                if (ajax.responseText=='failed'){
                status.innerHtml = "failed to upload file";
                }
                else {
                    status.innerHtml = 'uploaded';
                    alert(ajax.responseText);
                }
            }
        }
        ajax.send(formData);            //ajax.send("f="+formData+"&t="+type+"&p="+professor+"&n="+name+"&cid="+cid+"&fn="+FileName);
    }
}

所以我发送formData到php。但此时我无法从表单数据中获取文件并将其上传到服务器。这是我的PHP

// Ajax calls this code to add a past test
if (isset($_FILES['file']){
    $file = $_FILES['file'];
            $path = 'files/'.$type.'/'.$fileName;
            $moveResult = move_uploaded_file($file, $path);

        if ($moveResult != true) {
            echo "ERROR: File not uploaded. Try again.";
            //unlink($fileTmpLoc); // Remove the uploaded file from the PHP temp folder
            exit();
        }


    $path = 'files/'.$type.'/'.$fileName;
    $sql = "INSERT into past_papers VALUES ('$name', '$type', '$cid', '$professor','$path')";
    $query = mysqli_query($db_conx,$sql);
    if (mysqli_affected_rows($db_conx)>0){
        echo "success";
        exit();
        }   
    else {
        echo "failed sql";
        exit();
    }
}
?>

此外，我想获取文件的输入并一起处理它们。上传文件，并将输入插入数据库。

Answer 1

我能找到的最简单的一个。 :)

jQuery代码

<form name='form1' method='post' enctype='multipart/form-data' id='form-id'>
    <input type='submit' id='input' value='Upload' />
</form>

HTML代码

{
  "quizlist":[
  {
    "question":"Which picture shows a Parrot?",
    "option1":"Parrot.png",
    "option2":"Cardinal.png",
    "option3":"Toucan.png",
    "option4":"Owl.png",
    "videoURL" : "https://www.youtube.com/watch?v=RfXxh0Eff_w"
    },
  {
    "question":"Which picture shows a Peacock?",
    "option1":"Peacock.png",
    "option2":"Flamingo.png",
    "option3":"Quetzal.png",
    "option4":"Penguin.png",
    "videoURL" : "https://www.youtube.com/watch?v=jz-tjJhFH1k"
    },
    {
      "question":"Which picture shows a Cockatoo?",
      "option1":"Cockatoo.png",
      "option2":"Turkey.png",
      "option3":"Duck.png",
      "option4":"Penguin.png",
      "videoURL" : "https://www.youtube.com/watch?v=TTb77syQjMg"
    },
  {
    "question":"Which picture shows a Toucan?",
    "option1":"Toucan.png",
    "option2":"Falcon.png",
    "option3":"Hummingbird.png",
    "option4":"Penguin.png",
    "videoURL" : "https://www.youtube.com/watch?v=WAYntcQTm5A"
    },
    {
      "question":"Which picture shows a Quetzal?",
      "option1":"Quetzal.png",
      "option2":"Cardinal.png",
      "option3":"Flamingo.png",
      "option4":"Owl.png",
      "videoURL" : "https://www.youtube.com/watch?v=IhSCnjr3-MY"
    }
  ]
}

通过ajax上传文件

1 个答案: