没有插件的 Ajax 文件在表单之外上传

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);
        }
    });
});