如何在不刷新页面的情况下将文件与其他文本输入一起上传

时间:2017-09-24 19:00:18

标签: javascript php jquery html5

我使用下面的代码成功上传文件而不刷新页面。我现在想要的是为文件的标题添加一个文本输入字段和一个textarea来描述文件,但我很难做到这一点。它给了我未定义的索引'错误。我应该在下面的代码中添加什么来上传文件,文本输入和textarea?

HTML

<form action="trash_one.php" method="post" id="uploadForm">
    <div id="targetLayer">No Image</div>
    <div id="uploadFormLayer">
    <label >Upload Image</label><br>
    <input type="file" class="inputFile" name="userImage" id="userImage">
    <input type="submit" name="submit" class="btnSubmit">
</form>
<div>

预期HTML表格

添加了文字输入和textarea

<form action="trash_one.php" method="post" id="uploadForm">
    <div id="targetLayer">No Image</div>
    <div id="uploadFormLayer">
    <input type="text" name="img_name">
    <label >Upload Image</label><br>
    <input type="file" class="inputFile" name="userImage" id="userImage">
    <textarea name="description" ></textarea>
    <input type="submit" name="submit" class="btnSubmit">
</form>
<div>

JAVASCRIPT

$(document).ready(function(e) {
  $("#uploadForm").on('submit',(function(e) {
    e.preventDefault();
    $.ajax({
        url: "trash_one.php",
        type: "POST",
        data: new FormData(this),
        contentType: false,
        cache: false,
        processData: false,
        success: function(data){
            $("#targetLayer").html(data);
        },
        error: function(){
        }
    });
}));
});

PHP

此脚本仅上传文件

if(is_array($_FILES)){
    if(is_uploaded_file($_FILES['userImage']['tmp_name'])){
        $sourcePath = $_FILES['userImage']['tmp_name'];
        $targetPath = "imagess/".$_FILES['userImage']['name'];
        if(move_uploaded_file($sourcePath,$targetPath)){
        ?>
        <img src="<?php echo $targetPath; ?>" width="100px" height="100px" />
        <?php
        }
    }
}

1 个答案:

答案 0 :(得分:0)

您的代码已经按照您的意愿运行了。只需查看$_POST数组而不是$_FILES数组。 post数组包含所有文本字段内容。 files数组包含上传的文件。