时间戳

首页 > 解决方案 > 文件上传返回未定义

javascript - 文件上传返回未定义

问题描述

首先，我是一名使用 JavaScript 的新手 Web 开发人员。

我正在尝试设置一个表单，用户可以在其中为他们的个人资料添加自己的图像。但是，在测试代码并选择图像时，返回的值是未定义的。由于某种原因，它不承认所选文件。

这是我的代码：

HTML

<form id="pic_form" action="#" class="wizard-big" enctype="multipart/form-data">
    <h1 style="font-size:0.9vw">Image</h1>
    <fieldset>
        <div class="row">
            <div class="col-xs-12">
                <img style="height:30%; width:30%" src="img/default_pic.jpg">
                <br/><br/>
                <div class="form-group">
                    <label style="font-size:0.8vw">Change Image</label>
                    <input id="PlayerPic" name="PlayerPic" type="file" class="form-control" style="font-size:0.7vw; height:10%">
                </div>
                <div class="form-group" style="visibility: hidden">
                    <label>Player ID</label>
                    <input id="PlayerID" name="PlayerID" type="text" class="form-control" readonly>
                </div>
            </div>
        </div>
    </fieldset>
</form>

JavaScript（客户端）

$.post( "/player_pic", $("#pic_form").serialize(),

JavaScript（服务器端）

app.post('/player_pic', function(req, res) {

    console.log('Adding player picture...........................');

    console.log('Pic = ' + req.body.PlayerPic);
    console.log('ID = ' + req.body.PlayerID);

});

这些是我得到的结果：

添加播放器图片.......................

图片 = 未定义

编号 = 1532947080817

我环顾四周，找不到解决方案，为什么当我从表单中的本地文件夹中选择图像时，它会以未定义的形式返回。

任何帮助将在这里非常感谢:)

谢谢

标签： javascriptjqueryhtmlnode.jsforms

解决方案

我想您需要使用multipart/form-data标头进行文件传输

const fileData = $('#sortpicture').prop('files')[0];   
const formData = new FormData();                  
form_data.append('file', fileData);

$.ajax({
    type: 'POST',
    url: '/player_pic',
    data: formData,
    contentType: 'multipart/form-data',
    success: function(php_script_response){
        console.log(php_script_response);
    }
})

推荐阅读