如何使用FormData进行ajaxfile upload
这是我使用拖放functiondynamic生成的html。
<form method="POST" id="contact" name="13" class="form-horizontal wpc_contact" novalidate="novalidate" enctype="multipart/form-data"> <fieldset> <div id="legend" class=""> <legend class="">file demoe 1</legend> <div id="alert-message" class="alert hidden"></div> </div> <div class="control-group"> <!-- Text input--> <label class="control-label" for="input01">Text input</label> <div class="controls"> <input type="text" placeholder="placeholder" class="input-xlarge" name="name"> <p class="help-block" style="display:none;">text_input</p> </div> <div class="control-group"> </div> <label class="control-label">File Button</label> <!-- File Upload --> <div class="controls"> <input class="input-file" id="fileInput" type="file" name="file"> </div> </div> <div class="control-group"> <!-- Button --> <div class="controls"> <button class="btn btn-success">Button</button> </div> </div> </fieldset> </form> 这是我的js代码…
<script> $('.wpc_contact').submit(function(event){ var formname = $('.wpc_contact').attr('name'); var form = $('.wpc_contact').serialize(); var FormData = new FormData($(form)[1]); $.ajax({ url : '<?php echo plugins_url(); ?>'+'/wpc-contact-form/resources/js/tinymce.php', data : {form:form,formname:formname,ipadd:ipadd,FormData:FormData}, type : 'POST', processData: false, contentType: false, success : function(data){ alert(data); } }); }
要获得正确的表单数据使用，您需要执行2个步骤。
准备工作
您可以将整个表单FormData（）进行处理
var form = $('form')[0]; // You need to use standard javascript object here var formData = new FormData(form);
或者为FormData（）指定确切的数据
var formData = new FormData(); formData.append('section', 'general'); formData.append('action', 'previewImg'); // Attach file formData.append('image', $('input[type=file]')[0].files[0]);
发送表单
使用jQuery的Ajax请求将如下所示：
$.ajax({ url: 'Your url here', data: formData, type: 'POST', contentType: false, // NEEDED, DON'T OMIT THIS (requires jQuery 1.6+) processData: false, // NEEDED, DON'T OMIT THIS // ... Other options like success and etc });
在这之后，它会发送一个jax请求，像你提交常规表单enctype="multipart/form-data"
更新：如果没有在选项中type:"POST" ，则此请求无法工作，因此必须通过POST请求发送所有文件。
注意：只有从jQuery 1.6开始才可以使用contentType: false
我不能在上面添加评论，因为我没有足够的声望，但上面的答案几乎是完美的，除了我不得不添加
键入：“POST”
到.ajax调用。 我挠了脑袋几分钟，试图弄清楚我做错了什么，这就是所需要的，并且是一种享受。 所以这是整个片段：
完全相信上面的答案，这只是一个小的调整。 这是为了防止其他人卡住，看不到明显的。
$.ajax({ url: 'Your url here', data: formData, type: "POST", //ADDED THIS LINE // THIS MUST BE DONE FOR FILE UPLOADING contentType: false, processData: false, // ... Other options like success and etc })
<form id="upload_form" enctype="multipart/form-data">
带有CodeIgniterfile upload的jQuery：
var formData = new FormData($('#upload_form')[0]); formData.append('tax_file', $('input[type=file]')[0].files[0]); $.ajax({ type: "POST", url: base_url + "member/upload/", data: formData, //use contentType, processData for sure. contentType: false, processData: false, beforeSend: function() { $('.modal .ajax_data').prepend('<img src="' + base_url + '"assethttp://img.dovov.comajax-loader.gif" />'); //$(".modal .ajax_data").html("<pre>Hold on...</pre>"); $(".modal").modal("show"); }, success: function(msg) { $(".modal .ajax_data").html("<pre>" + msg + "</pre>"); $('#close').hide(); }, error: function() { $(".modal .ajax_data").html( "<pre>Sorry! Couldn't process your request.</pre>" ); // $('#done').hide(); } });
您可以使用。
var form = $('form')[0]; var formData = new FormData(form); formData.append('tax_file', $('input[type=file]')[0].files[0]);
要么
var formData = new FormData($('#upload_form')[0]); formData.append('tax_file', $('input[type=file]')[0].files[0]);
两者都会工作。
View: <label class="btn btn-info btn-file"> Import <input type="file" style="display: none;"> </label> <Script> $(document).ready(function () { $(document).on('change', ':file', function () { var fileUpload = $(this).get(0); var files = fileUpload.files; var bid = 0; if (files.length != 0) { var data = new FormData(); for (var i = 0; i < files.length ; i++) { data.append(files[i].name, files[i]); } $.ajax({ xhr: function () { var xhr = $.ajaxSettings.xhr(); xhr.upload.onprogress = function (e) { console.log(Math.floor(e.loaded / e.total * 100) + '%'); }; return xhr; }, contentType: false, processData: false, type: 'POST', data: data, url: '/ControllerX/' + bid, success: function (response) { location.href = 'xxx/Index/'; } }); } }); }); </Script> Controller: [HttpPost] public ActionResult ControllerX(string id) { var files = Request.Form.Files; ...
$('#form-withdraw').submit(function(event) { //prevent the form from submitting by default event.preventDefault(); var formData = new FormData($(this)[0]); $.ajax({ url: 'function/ajax/topup.php', type: 'POST', data: formData, async: false, cache: false, contentType: false, processData: false, success: function (returndata) { if(returndata == 'success') { swal({ title: "Great", text: "Your Form has Been Transfer, We will comfirm the amount you reload in 3 hours", type: "success", showCancelButton: false, confirmButtonColor: "#DD6B55", confirmButtonText: "OK", closeOnConfirm: false }, function(){ window.location.href = '/transaction.php'; }); } else if(returndata == 'Offline') { sweetAlert("Offline", "Please use other payment method", "error"); } } }); });
其实文档显示，你可以使用XMLHttpRequest().send()简单地发送多种forms的数据 ，以防万一jquery
