Sunday, 15 January 2012

javascript - JQuery ajax file upload to ASP.NET with all form data -


I am creating a website that has a Career Page, to resume the input file HTML control. Using JQuery to post the values ​​of the form on the AXX page, everything works fine except for uploading the file. How can I use jQuery to post each field (including files) in ajax request? The example I'm seeing in Google is managing to only upload files, with no other fields. It does not have to upload my JQuery, ASPX files.

  & lt; Script type = "text / javascript" & gt; $ (Document) .ready (function (e) {// file variable var file; // add event $ ('# restart'). ('Change', upload ready); // hold files and give them our Set Change Variable Function (Event) {files = event.target.files;} $ ("#submit_btn"). Click (function () {var fileData = new formData (); $ .each (files, functions ( Key, value) {FileData.append (key, value);}) var formMessage = tinyMCE.get ('message'). GetContent (); var formname = $ ('.content-container #name'). Val ( ); Var formPhone = $ ('Contact-container #phone'). Val (); var formEmail = $ ('contact-container #email') Val (); var formApplyFor = $ ('contact-container #applyforfor') .value (); // Get some values ​​from the elements on the page: var a = $ .ajax ({method: "POST", Url: "mail / test.aspx", process data: wrong, content type: incorrect, data one: {form: 'carrier', name: formname, phone: formphone, email: form email, application for: formapplefor Start again: File data, wrapper sheet: window.botto (unsecope (sign message)}, success: work (data) {alert ('success'); }, Error: function (data) {warning ('error'); }}) Don (function (msg) {alert ('done');}); // Ajax end warning (A); }); // Submit Button End}}; // Document Ready End & lt; / Script & gt;  

This is probably because you do not have it differently but behave as a form object (

I did a quick test to demonstrate it uses ASP.NET MVC:

HTML and Javascript:

  
form id = "form" name = "form1" method = "post" encrypt = "multipart / form-data" & gt; & lt ; Div> & lt; label = "caption"> image captions & Lt; / label & gt; Input name = "caption" type = "text" />
gt; label = "caption2" & amp; Gt; Image Caption 2 & lt; / label & gt; Input Name = "Caption 2" type = "text" />
Label = "image1" & gt; image file & lt; input name = "image1" type = "file" /> & lt; / div & gt; & lt; / form & Gt; & lt; button onclick = "submit ()"> test submit the function () {var form = document.query selector ('form'); Var data = new form data (form); $ .jax ({type: "post", url: "home / upload", data: data, process data: incorrect, content type: wrong}); ASP.NET MVC:
  Upload Public Actions () {foreach (string files in request. Files) {Var fileContent = Request.Files [file]; If (fileContent! = Null & amp; amp; amp; ContentContent.ContentLength & gt; 0) {var stream = fileContent.InputStream; Var filename = fileContent.FileName; // You can do anything here}} foreach (string key in the request.Form) {var value = Request.Form [key]; } Return content ("OK"); }  

Enter image details here

Of course, it can be better by forcing a model ... etc.

If your primitive fields are not in any form, then I add them to the data data object by using the addendum And then I will try to send this object alone and try to send it alone. Hope this helps


No comments:

Post a Comment