在jquery中发送所选文件的内容以及ajax请求中的参数

时间:2014-11-10 06:15:17

标签: jquery html ajax html5

我使用以下代码将所选文件的内容发送到服务器

<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title></head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
            <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script>
        function startRead() {

           $.ajax({
    url: 'https://abc',
    data: document.getElementById('files').files[0],
    contentType: 'application/exe',
    processData: false,
    type: 'POST',
    success: function(data){
        console.log(data);
    }
    ,error:function(data)
    { console.log(data);
    }
});
                }

    </script>

    <body>    
    <input type="file" id="files"  onchange="startRead()" />

</body>    
</html>

正如你可以看到ajax reuqest,我传递了数据中的文件内容。 但除此之外,我还需要在给定的html中传递两个文本框的参数 此外,文件内容将在服务器端用作输入流,并再次重建为文件 它是如何通过的?

1 个答案:

答案 0 :(得分:0)

您可以尝试发送对象:

data: {
        file : document.getElementById('files').files[0],
        txt1 : document.getElementById("the-id-of-text-input-1").value,
        txt2 : document.getElementById("the-id-of-text-input-2").value
      }

或更多jQuery方式:

data: {
        file : $('#files').get(0).files[0],
        txt1 : $("the-id-of-text-input-1").val(),
        txt2 : $("the-id-of-text-input-2").val()
      }