如何使用Ajax上传文件+表单数据和blueimp的JQuery文件上传，而不仅仅是POST？

我有一个表格：如何使用Ajax上传文件+表单数据和blueimp的JQuery文件上传，而不仅仅是POST？

<div class="row-fluid"> 

    <div class="span5 row-fluid" id="description" style="margin-left:0px;"> 
     <div> 
      <label>Title</label> 
      <input class="span12" type="text" placeholder="Title" id="description_title" name="description_title"/> 
      <label>Author</label> 
      <input class="span12" type="text" placeholder="Author" id="description_author" name="description_author"/> 
      <label>Tags</label> 
      <input class="span12" type="text" placeholder="Tags" id="description_tags" name="description_tags"/> 
      <label>Description</label> 
      <textarea class="span12" id="description_textarea" name="description_textarea" rows="5" style="resize:none"></textarea> 

      <div id="buttons" class="row-fluid" style="margin-top: 5px"> 
       <div class="span12"> 
       <span class="span5 btn btn-primary btn-file" id="chose_files_btn" onclick="filechose_button.click()">chose files 
        <input id="filechose_button" type="file" name="fileData" data-url="http://localhost:3001/upload/1234567890"/></span> 
       <button id="upload_button" type="submit" name="upload" class="span5 offset2 btn btn-success" disabled="true" onclick="$('#upload_form').trigger('upload_fired');">upload</button> 
       </div> <!-- span12 --> 
      </div> <!-- buttons --> 
     </div> <!-- well --> 
    </div> <!-- video_description --> 
    </div> <!-- row-fluid -->

我怎么能以这样的方式整合一个jQuery上传插件，即选择一个文件，filechose_button后，我可以使upload_button并发送所有输入字段和文件使用AJAX，而不是像现在只是在POST请求后重新加载页面。

上传的JS是：

$(function() { 
    $('#filechose_button').fileupload({ 
     dataType: 'json', 
     add: function (e, data) { 
      data.context = $('#upload_button'); 
       $('#upload_button').click(function() { 
        data.submit(); 
       }); 
     }, 
     done: function (e, data) { 
      data.context.text('Upload finished.'); 
     } 
    }); 
});

但仍然没有使用AJAX

来源

2013-04-28 static

您可以使用文件上传同时提交文件上传和附加表单数据：https://github.com/blueimp/jQuery-File-Upload/wiki/How-to-submit-additional -form-data – mccannf 2013-04-28 21:15:52

:)我来自那个页面。我在阅读该手册后编写了这段代码，但是我遇到了一个问题，即表单将被同步发送，而不是AJAX。 'data.submit（）;'不是通过AJAX执行 – static 2013-04-28 21:20:41

而是根据输入字段创建fileupload，而应该将输入封装在表单中，并根据该表单的id创建fileupload。 – mccannf 2013-04-28 21:57:48

问题是形式的<button>元素的默认行为发送数据。删除属性type="submit"不会更改任何内容。因此，button不是通过触发我自己的功能，而是通过POST请求发送form。

来源

2013-04-28 22:28:00 static

或者您可以只添加'type =“按钮” – musicvicious 2016-03-31 16:07:56

@Pere：确保您不使用表单中的按钮。我通过使用引导btn类的div来解决它。这是我的javascript代码：

//this should not be a <button></button>, but a div 
var submitbtn = $("#submitbtn"); 


//upload an image && form submission 
     $('#avatar').fileupload({ 
      singleFileUploads: true, 
      multipart  : true, 
      dataType   : 'json', 
      autoUpload  : false, 
      url    : 'yourEndpoint', 
      type    : 'POST', 
      add    : function (e, data) { 
       submitbtn.on("click", function() { 

        data.formData = $("#form-activate-user").serializeArray(); 
        data.submit(); 


       }); 
      }, 
      done    : function (result) {} 
      }, 
      fail    : function (e) {}

来源

2015-06-04 11:37:59

如何使用Ajax上传文件+表单数据和blueimp的JQuery文件上传，而不仅仅是POST？

回答

相关问题