Question

我正在尝试通过AJAX上传文件。我搜索了很多，但发现只使用表单提交的例子，但我不能使用表单提交。我尝试了几个例子但没有任何东西到达我的服务器当我尝试this link时，它工作了，但它再次通过表单提交。

以下是与上下文相关的代码段

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>

修改

如果不使用表单提交和formdata，还有其他方法吗？

Answer 1

假设您使用的是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文件API - 请查看以下文章：

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

Answer 2

我认为目前FormData对象仅在Safari / Firefox中受支持，尚未被大多数浏览器采用。

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

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

Answer 3

如果你想使用

，还有一个小的选择

<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>

你可以找到插件here

无法使用AJAX上传文件

修改

3 个答案: