Question

当输入字段不在表单标记内时，我一直在寻找使用Ajax上传文件的解决方案。我已经尝试了这个solution。

这是我的HTML

<span id="user-image-up-btn">Last opp bilde</span>
<input id="user_image_upload" type="file" />

这是我的代码，我收到了返回TypeError: undefined is not an object (evaluating '$("#user_image_upload").files')或当我使用替代号码2时，我得到Object, object。

这是我的jQuery

// IMAGE UPLOAD
$("#user_image_upload").change(function() {
    var fileform = new FormData();
    fileform.append('pictureFile', $("#user_image_upload").files[0]);
    $.ajax({
        url: '/userimageupload',
        type: 'POST',
        processData: false,
        contentType: false,
        dataType : 'json',
        data: fileform,
        beforeSend: function(){ 
            $("#user-image-up-btn").html('Laster opp...');
            console.log(fileform);
        },
        success: function(data){
            $("#user-image-up-btn").html('Last opp bilde');
            console.log(fileform);
        },
        error: function(exception){
            alert('error:'+exception);
            console.log(fileform);
        }
    });
});

修改通过使用Adeneo的答案，我设法上传文件。但是，我仍然得到error:[object Object]，这导致表单的其余部分失败。怎么样？

Answer 1

jQuery对象没有files属性，它将是底层DOM节点

$("#user_image_upload").on('change', function() {
    var fileform = new FormData();
    fileform.append('pictureFile', this.files[0]);

    $.ajax({
        url: '/userimageupload',
        type: 'POST',
        processData: false,
        contentType: false,
        dataType : 'json',
        data: fileform,
        beforeSend: function(){ 
            $("#user-image-up-btn").html('Laster opp...');
        },
        success: function(data){
            $("#user-image-up-btn").html('Last opp bilde');
        },
        error: function(exception){
            alert('error:'+exception);
        }
    });
});

没有插件的形式之外的Ajax文件上传

1 个答案: