如何通过 Jquery/AJAX 上传文件 [重复]

Posted 2023-02-22

【中文标题】如何通过 Jquery/AJAX 上传文件 [重复]

【英文标题】：How to upload file through Jquery/AJAX [duplicate]

【发布时间】：2013-11-24 01:54:10

【问题描述】：

我目前正在使用以下代码通过 AJAX 发布我的表单：

$(document).ready(function()
    $("form#createForm").submit(function()  // loginForm is submitted
        $("form#createForm input#createForm_submit").attr('disabled','disabled');

        tinyMCE.triggerSave();

        $.ajax(
            type: "POST",
            dataType: "json",
            url: "perform", // URL of the Perl script
            data: $("#createForm").serialize(),

            // script call was successful 
            // data contains the JSON values returned by the Perl script 
            success: function(data)

                $('div.form-group').each(function()
                    $(this).removeClass('has-error');
                );

                if (data.error)  // script returned error
                    var myList = $('ul.msg-list').empty();

                    $.each(data.msg, function(key,item) 
                        $("div."+key).addClass('has-error');
                        $('<li>').text(item.errtxt).appendTo(myList);
                    );


                    $('div#create_createresult').html('some error').html(myList);
                    $('div#create_createresult').addClass("text-danger");

                    $("form#createForm input#createForm_submit").removeAttr('disabled');
                 // if
                else 
                 // login was successful
                    //$('form#login_loginform').hide();
                    $('div#create_createresult').text(data.msg);
                    $('div#create_createresult').addClass("success");

                 //else
             // success
        ); // ajax
        $('div#login_loginresult').fadeIn();
        return false;
    );
);

现在我想添加以相同形式上传图片的可能性，并在此 JQUERY 和相同的服务器端脚本中实现它。我唯一的问题是，我不知道该怎么做。我已经测试了上面的内容，我发现它没有将 $_FILES 变量传递给我的服务器端脚本。

任何人都可以引导我了解我需要做什么，以添加使用此脚本上传图片的可能性吗？

【问题讨论】：

第一步，不要使用.serialize()。你需要使用window.formData，我建议研究一下。另请注意，许多版本的 IE 都不支持它。

@KevinB：嗯，IE 不是问题......你建议做什么呢？我会查看 formData - 也许忘记 jquery 并使用普通帖子代替.. :)

这会有所帮助吗：***.com/questions/166221/…

【参考方案1】：

尝试使用它。

// grab your file object from a file input
$('#fileInput').change(function () 
  sendFile(this.files[0]);
);

// can also be from a drag-from-desktop drop
$('dropZone')[0].ondrop = function (e) 
  e.preventDefault();
  sendFile(e.dataTransfer.files[0]);
;

function sendFile(file) 
  $.ajax(
    type: 'post',
    url: '/targeturl?name=' + file.name,
    data: file,
    success: function () 
      // do something
    ,
    xhrFields: 
      // add listener to XMLHTTPRequest object directly for progress (jquery doesn't have this yet)
      onprogress: function (progress) 
        // calculate upload progress
        var percentage = Math.floor((progress.total / progress.totalSize) * 100);
        // log upload progress to console
        console.log('progress', percentage);
        if (percentage === 100) 
          console.log('DONE!');
        
      
    ,
    processData: false,
    contentType: file.type
  );

【讨论】：

应该是file.name 而不是file.fileName。

它在 ie 9.0 和更低版本上不起作用。请告诉我如何在这些版本的 ie 中实现相同的功能

嗨@Sonu 有什么错误吗？