Question

我正在使用node.js并在单击加号glyphicon（下图）后测试如何上传图像。如何将所选图像发送到服务器？我之前上传过图片，但这是在处理邮件请求的表单中。 Afterwrds我会在服务器端与Multer一起处理它。在选择图像作为个人资料图片后，我不知道该怎么做。我在imageIsLoaded()函数中考虑$ .post，但我不知道要添加什么作为数据。

我可以在下面给出的示例中更改src属性，但我想将所选图像永久保存在服务器上。

This is how the website looks

客户端JS文件

$("#upload").on('click',function() {
    $("input[type='file']").click();
});

$(":file").change(function () {
    if (this.files && this.files[0]) {
        var reader = new FileReader();
        reader.onload = imageIsLoaded;
        reader.readAsDataURL(this.files[0]);
    }
});

function imageIsLoaded (e) {
    console.log('heloooooo')
    $('.profileImg').attr('src', e.target.result);
}

EJS

<div class="profileImgSection">
        <% if (user.profilePicture.uploaded === false) { %>
        <span id="upload" class="glyphicon glyphicon-plus-sign"></span>
        <input type='file'  />

        <img class="profileImg"
             src="<%="images/pexels-photo-370799.jpeg"%>"
             alt="fail">
        <% } else { %>
        <img class="profileImg"
             src="<%=user.profilePicture.link%>"
             alt="fail">
        <% } %>
    </div>

CSS文件

input[type='file'] {
    display: none;
}

Answer 1

当文件选择器更改时，您可以预览图像并通过ajax上传， HTML

<form id="form" enctype="multipart/form-data">
  <input type='file' onchange="readURL(this);" />
</form>
<img id="preview" src="#" alt="your image" />

JS

 function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('#preview')
                        .attr('src', e.target.result)
                        .width(150)
                        .height(200);
                };

                reader.readAsDataURL(input.files[0]);

                //ajax post here
                 $.ajax({
                     url: '',
                    method: 'POST',
                    data: new FormData($('#form')[0])
                  }).done(function (data) {

                  }).fail(function(jqXHR, textStatus, errorThrown){

                  });
            }
        }

将上传的图像数据发送到节点服务器

1 个答案: