javascript - 无法使用 AJAX 上传文件

Question

我正在尝试通过 AJAX 上传文件。我进行了很多搜索，但找到了仅使用表单提交的示例，但我不能使用表单提交。我已经尝试了几个示例，但没有任何东西到达我的服务器。当我尝试这个链接时，它起作用了，但它再次通过表单提交。

这是与上下文相关的一段代码

JS代码

function _upload(filedata) {
    $.ajax({
        url: './myURI',
        data: filedata,
        type: 'POST',

        contentType: 'multipart/form-data',
        mimeType: 'multipart/form-data',    //Property added in 1.5.1

        success: function (data) {
            alert(data);
        }
    });
}
$("#cpc-uploadBtn").click(function (evt) {
                var data;
                data = new FormData();
                data.append('file', $('#cpc-upload')[0].files[0]);
                _upload(data);

            });

HTML 部分

    <input id="cpc-upload" name="file" type="file" />
    <button id="cpc-uploadBtn" type="button">Upload</button>

编辑

有没有其他方法可以在不使用表单提交和表单数据的情况下做到这一点？

score 2 · Accepted Answer

假设您使用的是 Safari/FireFox（只有那些支持FormData），您需要修改您的$.ajax调用：

$.ajax({
    url: './myURI',
    data: filedata,
    type: 'POST',
    contentType: false,
    processData: false,
    success: function (data) {
        alert(data);
    }
});

将contentType选项设置为 false 将强制 jQuery 不为您添加 Content-Type 标头（否则将缺少边界字符串）。此外，该processData标志必须设置为 false，因此 jQuery 不会尝试将您FormData转换为字符串。

现在，如果您知道您的客户正在使用 HTML5，您应该尝试使用新的 JavaScript File API - 查看以下文章：

在所有其他情况下，您被迫使用自定义插件，例如：

score 0 · Accepted Answer

我想目前 FormData 对象只在 Safari/Firefox 中被支持，它还没有被大多数浏览器采用。

我最近在为 asp.net 寻找 ajax 文件上传器时遇到了很多困难，我目前在我的项目中使用这个：

https://github.com/valums/file-uploader

score 0 · Accepted Answer

如果你想使用，有一个小的选择

<script>
    // wait for the DOM to be loaded
    $(document).ready(function() 
    {
        // bind 'myForm' and provide a simple callback function
       $("#tempForm").ajaxForm({
       url:'../calling action or servlet',
       type:'post',
       beforeSend:function()
       {
         alert("perform action before making the ajax call like showing soinner image");
       },
       success:function(e){
        alert("data is"+e);
            alert("now do whatever you want with the data");
       }
       });
    });
</script>

你可以在这里找到插件

javascript - 无法使用 AJAX 上传文件

编辑

3 回答 3

Related

Reference