使用ajax和JavaScript函数上传文件

我需要你帮个大忙！我尝试使用JavaScript和Ajax发送上传的文件，但是没有获得任何成功

我希望当我上传文件时，它将调用函数

myFunction（）

，并将文件发送到我设置的PHP路径（ajax.PHP）

下面是到目前为止我已经完成的代码

<script>
   function myFunction() {
      var x = document.getElementById("up");
      $.ajax({
         type: 'GET',
         url: 'ajax.php',
         data: {},
         beforeSend: function() {},
         success: function(data) {
            alert(data);
         }
      });
   }
</script>
<input type="file" name="images" id="up" onchange="myFunction()" />

函数myFunction（）{
var x=document.getElementById（“up”）；
$.ajax({
键入：“GET”，
url:'ajax.php'，
数据：{}，
beforeSend:function（）{}，
成功：功能（数据）{
警报（数据）；
}
});
}

使用Jquery和Ajax上传文件有点棘手，但已经有相当好的文档记录。快速的谷歌搜索返回了一个相当好的例子

最重要的部分是获取表单数据。Javascript可以获取文件元素并从中构建

FormData

对象。根据上面的例子

$('input[type=file]').on('change', prepareUpload);
function prepareUpload(event)
{
  files = event.target.files;
}

然后可以构建表单对象，并将其用作ajax请求的数据组件

var data = new FormData();
$.each(files, function(key, value)
{
    data.append(key, value);
});

---

使用ajax上载字段时，必须创建

formData

对象，然后才能更改属性

data

： 试试这个：

<script>
    function myFunction() {
        var form = $('form')[0]; 
        var formData = new FormData(form);

        $.ajax({
            type: 'POST',
            url: 'ajax.php',
            data: formData,
            contentType: false,
            processData: false,
            success: function(data) {
                alert(data);
            }
        });

    }
</script>

<form method="POST">
    <input type="file" name="images" id="up" onchange="myFunction()" />
</form>

函数myFunction（）{
变量形式=$（'form'）[0]；
var formData=新formData（表格）；
$.ajax({
键入：“POST”，
url:'ajax.php'，
数据：formData，
contentType:false，
processData:false，
成功：功能（数据）{
警报（数据）；
}
});
}

如果您只有一个图像并且正在表单中使用输入，则可以使用FormData（）获取对象，并在单击提交按钮时发送该对象。将其传递给AJAX时，使用变量（formdata）告诉AJAX要发送哪些数据。希望这有助于：

  function myFunction(event){
       event.preventDefault();
      var formdata = new FormData();
     formdata.append("images[]",images);
      $.ajax({
        type: 'GET',
        url: 'ajax.php',
        data: formdata,
        beforeSend: function() {},
        success: function(data) {
           alert(data);
       }
     });
   }

如果您正在上载多个图像：

  <form id="yourform" method="POST" enctype="multipart/form-data">
      <input type="file" name="images[]" id="up" onchange="myFunction()" 
    multiple/>
   </form>

---

试试这个，这是我的工作代码

function myFuction(){
        var form = $("#formId").get(0); 
        e.preventDefault(); //keeps the form from behaving like a normal (non-ajax) html form

        $.ajax({
            url: ajax.php,
            type: 'POST',
            data: new FormData(form),
            dataType: 'json',
            mimeType: 'multipart/form-data',
            processData: false,
            contentType: false,
            success: function (response) {
                   alert('success');
            },
            error: function (data) {
                   alert('error');
            }
        });
}

<form id="formId" method="POST">
    <input type="file" name="images" id="up" onchange="myFunction()" />
</form>

函数myFuction（）{
var form=$（“#formId”）.get（0）；
e、 preventDefault（）；//防止表单像正常（非ajax）html表单那样运行
$.ajax({
url:ajax.php，
键入：“POST”，
数据：新表单数据（表单），
数据类型：“json”，
mimeType:“多部分/表单数据”，
processData:false，
contentType:false，
成功：功能（响应）{
警惕（“成功”）；
},
错误：函数（数据）{
警报（“错误”）；
}
});
}

看看这段JavaScript代码：有没有错误？是的，我有错误。谢谢你的回复。让我试试，幸好没用。它甚至不打印警报！还有其他建议吗？试试我的新代码，如果它给出了一个错误，告诉我错误please@JonathanMartínez，您错过了

mimeType:'multipart/formdata'，

不能在这里使用Jquery，它只能用JAVASCRIPT。感谢泰克斯的回复，感谢它的运行。bt在php文件中获取文件的代码是什么？您只需使用

$\u FILES

变量即可。do

echo”“；打印（$_文件['images']）在您的php文件中，即ajax.phpwhy downvote？就连OP的老板都说它跑了。。。