問題描述

我目前正在使用以下代碼通過 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
  });
}

這篇關于如何通過 Jquery/AJAX 上傳文件的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！