如何通过Jquery / AJAX上传文件

我目前通过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'); $('
').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; }); }); 

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

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

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