Question

需要大忙！我尝试使用JavaScript＆amp ;;发送上传的文件然而，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()" />

Answer 1

如果您只有一个图像并在表单中使用输入，则可以使用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>

Answer 2

使用Jquery和Ajax上传文件有点棘手，但它已经很好地记录了。快速谷歌搜索返回了这个https://abandon.ie/notebook/simple-file-uploads-using-jquery-ajax

的一个相当好的例子

最重要的部分是获取formdata。 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);
});

Answer 3

当您使用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>

Answer 4

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

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>

使用ajax和JavaScript函数上传文件

4 个答案: