这是我使用拖放功能动态生成的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 });
之后,它将发送ajax请求,就像您提交常规表格一样 enctype="multipart/form-data"
enctype="multipart/form-data"
更新:如果没有type:"POST"in选项,该请求将无法工作,因为所有文件都必须通过POST请求发送。
type:"POST"
注意: contentType: false仅从jQuery 1.6起可用
contentType: false