我可以使用以下jQuery代码使用ajax请求的POST方法执行文件上载吗?

$.ajax({
    type: "POST",
    timeout: 50000,
    url: url,
    data: dataString,
    success: function (data) {
        alert('success');
        return false;
    }
});

如果可能,我需要填写数据部分吗?这是正确的方式吗?我只将文件POST到服务器端。

我一直在搜索,但我发现的是一个插件,而在我的计划中,我不想使用它。至少目前是这样。


当前回答

简单上载表单

<脚本>//表单提交$(“表单”).submit(函数(evt){evt.preventDefault();var formData=新的formData($(this)[0]);$.ajax美元({url:'fileUpload',类型:'POST',data:formData,异步:false,缓存:false,contentType:false,enctype:'多部分/表单数据',processData:false,成功:函数(响应){警报(响应);}});return false;});</script><!--上载表单--><表单><表><tr><td colspan=“2”>文件上载</td></tr><tr><th>选择文件</th><td><input id=“csv”name=“csv“type=“file”/></td></tr><tr><td colspan=“2”><input-type=“submit”value=“subject”/></td></tr></table></form>

其他回答

2019年更新:

html

<form class="fr" method='POST' enctype="multipart/form-data"> {% csrf_token %}
<textarea name='text'>
<input name='example_image'>
<button type="submit">
</form>

js

$(document).on('submit', '.fr', function(){

    $.ajax({ 
        type: 'post', 
        url: url, <--- you insert proper URL path to call your views.py function here.
        enctype: 'multipart/form-data',
        processData: false,
        contentType: false,
        data: new FormData(this) ,
        success: function(data) {
             console.log(data);
        }
        });
        return false;

    });

视图.py

form = ThisForm(request.POST, request.FILES)

if form.is_valid():
    text = form.cleaned_data.get("text")
    example_image = request.FILES['example_image']

我想到了一个主意:

Have an iframe on page and have a referencer.

具有将输入类型文件元素移动到的表单。

Form:  A processing page AND a target of the FRAME.

结果将发布到iframe,然后您只需将获取的数据发送到所需的图像标签,如下所示:

data:image/png;base64,asdfasdfasdfasdfa

并加载页面。

我相信这对我来说是有效的,取决于你是否能够做到:

.aftersubmit(function(){
    stopPropagation(); // or some other code which would prevent a refresh.
});

无法通过AJAX上载文件。您可以上传文件,而无需使用IFrame刷新页面。您可以在此处查看更多详细信息。


更新

XHR2支持通过AJAX上传文件。例如,通过FormData对象,但遗憾的是,它不受所有/旧浏览器的支持。

FormData支持从以下桌面浏览器版本开始。

即10+Firefox 4.0+铬7+Safari 5+歌剧12+

有关详细信息,请参阅MDN链接。

使用隐藏的iframe并将表单的目标设置为该iframe的名称。这样,当提交表单时,只会刷新iframe。为iframe的加载事件注册一个事件处理程序,以解析响应。

var dataform = new FormData($("#myform")[0]);
//console.log(dataform);
$.ajax({
    url: 'url',
    type: 'POST',
    data: dataform,
    async: false,
    success: function(res) {
        response data;
    },
    cache: false,
    contentType: false,
    processData: false
});