В настоящее время я ставлю свою форму через 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 на мой скрипт на стороне сервера.
Может ли кто-нибудь привести меня в любом направлении, что мне нужно сделать, добавить возможность загрузки изображения с помощью этого скрипта?
попробуйте использовать это.
// 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 }); }