猿问
下载APP

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

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

所以我有一个表单,我使用jquery序列化函数通过ajax提交表单

        serialized = $(Forms).serialize();

        $.ajax({

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

        }

但是如果表单有一个<input type="file">字段怎么办....如何使用这个ajax序列化方法将文件传递给表单...打印$ _FILES不输出任何内容


FFIVE
浏览 67回答 3
3回答

撒科打诨

无法使用AJAX上传文件,因为您无法访问存储在客户端计算机上的文件的内容,并使用javascript将其发送到请求中。实现此目的的技巧之一是使用隐藏的iframe。有一个很好的jquery表单插件,允许您AJAXify您的表单,它也支持文件上传。因此,使用此插件,您的代码将如下所示:$(function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;$('#ifoftheform').ajaxForm(function(result)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert('the&nbsp;form&nbsp;was&nbsp;successfully&nbsp;processed'); &nbsp;&nbsp;&nbsp;&nbsp;});});该插件自动负责订阅submit表单事件,取消默认提交,序列化值,使用正确的方法和处理文件上载字段,...

慕运维8079593

您现在可以使用Ajax上传文件!例子:https://stackoverflow.com/a/8758614/1072492http://net.tutsplus.com/tutorials/javascript-ajax/uploading-files-with-ajax/

慕慕森

它适用于任何类型的表单$(document).on("submit",&nbsp;"form",&nbsp;function(event){ &nbsp;&nbsp;&nbsp;&nbsp;event.preventDefault(); &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;url=$(this).attr("action"); &nbsp;&nbsp;&nbsp;&nbsp;$.ajax({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url:&nbsp;url, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type:&nbsp;$(this).attr("method"), &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dataType:&nbsp;"JSON", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data:&nbsp;new&nbsp;FormData(this), &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;processData:&nbsp;false, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contentType:&nbsp;false, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;success:&nbsp;function&nbsp;(data,&nbsp;status) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error:&nbsp;function&nbsp;(xhr,&nbsp;desc,&nbsp;err) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;});&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
打开App,查看更多内容
随时随地看视频慕课网APP
我要回答