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

Question

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

这是我的HTML

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

这是我的代码，我得到 return 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 没有插件的表单外文件上传

Ajax file upload outside of form without plugins

php

ajax

upload

jquery

input