blocks|key|1054208|text|无法使用AJAX上载文件，因为您无法访问存储在客户端计算机上的文件内容，也无法使用javascript在请求中发送该文件。实现这一点的技术之一是使用隐藏的iframe。有一个很好的jquery+form+plugin，它允许你AJAXify你的表单和它的supports+file+uploads。所以使用这个插件，你的代码看起来就像这样：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1054209|$(function()+{
++++$('#ifoftheform').ajaxForm(function(result)+{
++++++++alert('the+form+was+successfully+processed');
++++});
});|code-block|syntax|javascript|1054210|该插件自动负责订阅表单的submit事件、取消默认提交、序列化值、使用正确的方法和处理文件上传域……|style|CODE|1054211|entityMap|0|LINK|mutability|MUTABLE|url|http://jquery.malsup.com/form/|1|http://jquery.malsup.com/form/#file-upload^0|2I|I|0|3J|L|1|0|0|C|6|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]|$A|10|B|11|1|12]]|C|$]]|$1|D|3|E|5|F|7|13|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|14|8|@$A|15|B|16|K|L]]|9|@]|C|$]]|$1|M|3|-4|5|6|7|17|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]|U|$5|P|Q|R|C|$S|V]]]]

A file cannot be uploaded using AJAX because you cannot access the contents of a file stored on the client computer and send it in the request using javascript. One of the techniques to achieve this is to use hidden iframes. There's a nice <a href="http://jquery.malsup.com/form/" rel="noreferrer">jquery form plugin</a> which allows you to AJAXify your forms and it <a href="http://jquery.malsup.com/form/#file-upload" rel="noreferrer">supports file uploads</a> as well. So using this plugin your code will simply look like this:

<pre><code>$(function() {
 $('#ifoftheform').ajaxForm(function(result) {
 alert('the form was successfully processed');
 });
});
</code></pre>

The plugin automatically takes care of subscribing to the <code>submit</code> event of the form, canceling the default submission, serializing the values, using the proper method and handle file upload fields, ...

blocks|key|839542|text|您可以使用FormData方法通过AJAX上传文件。虽然IE7、8和9不支持FormData功能。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|839543|$.ajax({
++++url:+"ajax.php",+
++++type:+"POST",+++++++++++++
++++data:+new+FormData('form'),
++++contentType:+false,+++++++
++++cache:+false,+++++++++++++
++++processData:false,+
++++success:+function(data)+{
++++++++$("#response").html(data);
++++}
});|code-block|syntax|javascript|839544|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can upload files via AJAX by using the FormData method. Although IE7,8 and 9 do not support FormData functionality.

<pre><code>$.ajax({
 url: "ajax.php", 
 type: "POST", 
 data: new FormData('form'),
 contentType: false, 
 cache: false, 
 processData:false, 
 success: function(data) {
 $("#response").html(data);
 }
});
</code></pre>

blocks|key|839585|text|使用FormData+object.It适用于任何类型的表单|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|839586|$(document).on("submit",+"form",+function(event)
{
++++event.preventDefault();
++++$.ajax({
++++++++url:+$(this).attr("action"),
++++++++type:+$(this).attr("method"),
++++++++dataType:+"JSON",
++++++++data:+new+FormData(this),
++++++++processData:+false,
++++++++contentType:+false,
++++++++success:+function+(data,+status)
++++++++{

++++++++},
++++++++error:+function+(xhr,+desc,+err)
++++++++{
++++++++++++

++++++++}
++++});++++++++

});|code-block|syntax|javascript|839587|entityMap^0|2|8|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

Use <code>FormData</code> object.It works for any type of form
<pre><code>$(document).on(&quot;submit&quot;, &quot;form&quot;, function(event)
{
 event.preventDefault();
 $.ajax({
 url: $(this).attr(&quot;action&quot;),
 type: $(this).attr(&quot;method&quot;),
 dataType: &quot;JSON&quot;,
 data: new FormData(this),
 processData: false,
 contentType: false,
 success: function (data, status)
 {

 },
 error: function (xhr, desc, err)
 {
 

 }
 }); 

});
</code></pre>

blocks|key|839624|text|HTML5引入了FormData类，可以用来通过ajax上传文件。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|839625|FormData支持从以下桌面浏览器版本开始。IE+10%2B、火狐4.0%2B、Chrome+7%2B、Safari+5%2B、Opera+12%2B|839626|FormData+-+Mozilla.org|839627|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en/docs/Web/API/FormData/FormData^0|8|8|0|0|0|M|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|V|8|@]|D|@$9|W|A|X|1|Y]]|E|$]]|$1|J|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|Q]]]]

HTML5 introduces <code>FormData</code> class that can be used to file upload with ajax.

FormData support starts from following desktop browsers versions. IE 10+, Firefox 4.0+, Chrome 7+, Safari 5+, Opera 12+

<a href="https://developer.mozilla.org/en/docs/Web/API/FormData/FormData" rel="nofollow noreferrer">FormData - Mozilla.org</a>

blocks|key|839649|text|+++var+form+=+$('#job-request-form')[0];
++++++++var+formData+=+new+FormData(form);
++++++++event.preventDefault();
++++++++$.ajax({
++++++++++++url:+"/send_resume/",+//+the+endpoint
++++++++++++type:+"POST",+//+http+method
++++++++++++processData:+false,
++++++++++++contentType:+false,
++++++++++++data:+formData,|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|839650|它对我起作用了！只需设置processData和contentType为False即可。|unstyled|839651|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code> var form = $('#job-request-form')[0];
 var formData = new FormData(form);
 event.preventDefault();
 $.ajax({
 url: "/send_resume/", // the endpoint
 type: "POST", // http method
 processData: false,
 contentType: false,
 data: formData,
</code></pre>

It worked for me! just set processData and contentType False.

So I have a form and I'm submitting the form through ajax using jquery serialization function 

<pre><code> serialized = $(Forms).serialize();

 $.ajax({

 type : "POST",
 cache : false,
 url : "blah",
 data : serialized,
 success: function(data) {

 }
</code></pre>

but then what if the form has an <code>&lt;input type="file"&gt;</code> field....how do I pass the file into the form using this ajax serialization method...printing $_FILES doesn't output anything

how to do file upload using jquery serialization

HTML5

JSON

我有一个表单，我使用jquery序列化函数通过ajax提交表单        serialized = $(Forms).serialize();        $.ajax({        type        : "POST",        cache   : false,        url     : ...

问如何使用jquery序列化进行文件上传
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用jquery序列化进行文件上传EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用jquery序列化进行文件上传
EN