Question

我使用Mustache JS创建名为'addUser1'的模板用于显示目的。当我运行它时，只有图像位置被发布到服务器，而不是图像本身。这里有什么错误？

这是代码

$('#add-user').on('click', function(){

    var myform = document.getElementById("form_user");
    var data = new FormData(myform );
    $.each($('#user_photo')[0].files, function(i, file) {
        data.append('file', $('#user_photo')[0].files[0]);
    });

    var user = {
        user:{
        firstname: $firstname.val(),
        lastname: $lastname.val(),
        gender: $gender.val(),
        address1: $address1.val(),
        address2: $address2.val(),
        contact_number: $contact_number.val(),
        email: $email.val(),
        password: $password.val(),
        city: $city.val(),
        state: $state.val(),
        country: $country.val(),
        user_photo: $user_photo.val(),
        }
    };

    $.ajax({

        headers: {
                   'Content-Type': 'application/x-www-form-urlencoded'
                  },

        type: 'POST',
        url: 'http://13.229.164.32/users.json',
        data: data,
        cache : false,
        processData: false,
        dataType: 'json',
        cache : false,
        success: function(newUser){

        addUser1(newUser);
        },
        error: function (xhr, status, errorThrown) {
          alert("erorr")
        }

    });


});

Answer 1

.val()返回HTML元素的值;对于图像，这是src属性。您可能希望将数据转换为base64，然后尝试保存它。开销将是巨大的，但这是我能想到的方式之一。

类似的东西：

<img id="testImage" src="https://test.com/image.png" />
<canvas id="baseCanvas" />

然后，在JS中，您可以拥有以下内容：

const canvas  = document.getElementById( 'baseCanvas' );
const context = canvas.getContext( '2d' );
const image   = document.getElementById( 'testImage' );
context.drawImage( image, 10, 10 );
const data = canvas.toDataURL();

console.log( data );

Answer 2

你可以试试这个，

var formData = new FormData(); 
var totalFiles = document.getElementById("ProfilePhoto").files.length; 
for (var i = 0; i < totalFiles; i++) 
{ 
     var file = document.getElementById("ProfilePhoto").files[i]; formData.append("ProfilePhoto", file);
} 
            $.ajax({ 
                type: "POST",
                url: 'http://13.229.164.32/users.json', 
                data: formData, dataType: 'json',
                contentType: false, processData: false,
                success: function (response) 
                { 
                   addUser1(response);
                }, 
                error: function (error) { } 
            });

我跳这会对你有帮助。

通过ajax jquery上传图片

2 个答案: