通过ajax POST上传图像而不使用HTML表单

时间:2016-03-31 06:20:08

标签: javascript php jquery html ajax

我试图通过POST方法将一些数据发送到PHP文件而不使用HTML格式。这是我的代码。为什么它没有做任何事情?

<input type="file" name="fileToUpload" id="fileToUpload">
<input type="hidden" value="<?php echo $row['Gallery_Id']; ?>" name="gid" id="gid">
<input type="hidden" value="User" name="user" id="user">
<button onclick="myFormData()">Upload Image</button>
<script>
            $('#fileToUpload').on('change', function() {
            var myFormData = new FormData();
            var file = document.getElementById('fileToUpload').value;
            var gid = document.getElementById('gid').value;
            var user = document.getElementById('user').value;
            myFormData.append('file', file);
            myFormData.append('gid', gid);
            myFormData.append('user', user);
            });

            $.ajax({
                url: 'imgupload.php',
                type: 'POST',
                processData: false, // important
                contentType: false, // important
                dataType : 'json',
                data: myFormData
            });

            </script>

imgupload.php上我得到了像这样的POST数据

$gid = $_POST['gid'];
$user = $_POST['user'];

当我使用HTML表单方法时,它工作。这里有什么问题?

1 个答案:

答案 0 :(得分:1)

FormData.append()采用键值对,所以这是错误的:

myFormData.append(file,gid,user);

您需要以下内容:

myFormData.append('file', file);
myFormData.append('gid', gid);
myFormData.append('user', user);

从中您需要将此代码放在事件处理程序中,以便在需要时触发它。

例如:

$('#fileToUpload').on('change', function() {
  // your javascript code
});

你应该把它放在document.ready块中。