如何通过 Jquery/AJAX 上传文件

2021-12-24 00:00:00 file-upload jquery php javascript ajax

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

I am currently POSTING my form through AJAX with the following code:

$(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 变量传递给我的服务器端脚本.

Now I want to add the posibility of uploading a picture in the same form and just implement it in this JQUERY and in the same server-side script. My only problem is, I don't know how to do it.. I have tested the above, and I find, that it doesn't pass the $_FILES-variable to my server side script.

任何人都可以在我需要做的任何方向上引导我使用此脚本添加图像上传的可能性吗?

Can anyone lead me in any direction of, what I need to do, to add the possibility of image upload with this script?

推荐答案

尝试使用这个.

// 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
  });
}

相关文章