在没有插件的表单之外上传 Ajax 文件 - Ajax file upload outside of form without plugins

Ajax file upload outside of form without plugins

本文关键字：Ajax 文件表单插件 | 更新日期: 2023-09-27

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

这是我的网页

<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]，这会导致表单的其余部分失败。怎么来了？

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