如何使用jquery发送文件输入？

Question

我有一个包含3个文件输入的表单.我想通过jquery.i尝试在jquery中尝试序列化函数发送它,但我意识到这个函数不发送文件输入!

这是我的表格:

<form id="submit_pics" action="#" >

     file 1 : <input name="file1" id="file1" type="file" /><br />
     file 2 : <input name="file2" id="file2" type="file" /><br />
     file 3 : <input name="file3" id="file3" type="file" /><br />

     <br />
     <div>
         <a id="submit" href="javascript:;" ><img  src="uploads/images/button1.png" /></a>
     </div>

</form>

这是我的javascript代码:

<script type="text/javascript">

    $(document).ready(function(){

        $("#level3").click(function(event) {

            var str = $("#submit_pics").serialize(); 
            $.ajax({
                type: "POST",
                url: "track.php",
                data: str, 
                success: function(theResponse) {

                                        $('#req_result').html(theResponse);

                                    }

                return false;   
        });

    });

Answer 1

经过一些研究,我发现你可以用:

$.ajax({
    url: 'track.php',
    type: 'POST',
    data: new FormData($("#submit_pics")[0]),
    processData: false,
    contentType: false
}).

我是Java程序员(Liferay),在服务器中我使用它来获取文件:

UploadPortletRequest uploadRequest = PortalUtil.getUploadPortletRequest(request);
File File1 = uploadRequest.getFile("file1");
File File2 = uploadRequest.getFile("file2");

我在php中存在类似的东西.

Answer 2

遗憾的是,您无法通过XMLHttpRequest上传文件.AJAX实际上并不将表单发布到服务器,它以POST或GET请求的形式发送选定的数据.Javascript无法从用户计算机获取文件并将其发送到服务器

您可以使用棘手的解决方法,将请求(不使用AJAX)发布到隐藏的iframe.

看看这个指南