关闭

Node和express中利用Jquery的$.ajax和HTML5的FormData完成文件上传示例

标签: jqueryexpresshtml5node
2021人阅读 评论(1) 收藏 举报
分类:

Node和express中利用Jquery的$.ajax和HTML5的FormData完成文件上传示例

注:本文只讨论利用FormData完成简单的文件上传功能,关于FormData的其他信息请参阅官方文档。例如:MDN中关于FormData的信息

————————————–

下面这个demo展示了一个完整的例子,包括前台页面部分,Jquery的.ajax函数的处理部分和后台处理部分。为突出重点页面只写了必要的几个标签。应该注意的部分我会重点标出来。

前台页面部分

–前台页面部分需要注意的有下面两点,其他和一般时候我们写的表单没什么区别:

  1. form标签的属性中加上enctype=”multipart/form-data”;
  2. 注意input标签的name属性的取名,后台通过input元素name属性的值获取其中的内容(其实这里不只是后台取得input元素中用户输入内容的方式,也是取得select等元素中用户输入内容的方式)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo of HTML5 form-data by shad0w</title>
</head>
<body>
<h1>demo of HTML5 form-data</h1>
<form id="form-demo" enctype="multipart/form-data",action="javascript:">
    <label for="id-txt">要传递的文本信息</label>
    <input type="text" id="id-txt" name="name_txt"/>
    <br><br>
    <label for="id-file">选择上传的文件</label>
    <input type="file" id="id-file" name="file" />
    <br><br>
    <button id="sub-btn">提交</button>
</form>
<script type="text/javascript" src="jquery.min.js" ></script>
</body>
</html>

Jquery.ajax方法处理部分

–需要注意的是:

  1. 创建一个FormData对象,具体请看注释;
  2. 将data设置为新创建的FormData对象,
  3. 注意$.ajax函数的头信息值设置为false;即contentType: false
$(document).ready(function () {

    $("#id-form").on('click','#sub-btn',function () {

        /*
              创建一个FormData对象,注意参数(可选) 一个HTML表单元素,
              表单的信息都包含在了这个新的FromData对象中,可以在后台将它们取出:
                    --文本信息用 req.body.nameOfElement取出,如req.body.name_txt;
                    --文件信息用fs模块和path模块解析,后面会有实例
         */
        var formData = new FormData($("#id-form")[0]);

        //还可以用append方法添加一些附加信息参数为(name,value),如下面的代码:
        //formData.append('nickName','Jack');//-->后台用req.body.nickName将值'Jack'取出

        $.ajax({
            url: '/fileupload',
            type: 'POST',
            data: formData,//<----要传输的数据
            async: false,
            cache: false,
            timeout:100,
            contentType: false,//<----头信息设置为false
            processData: false,
            success: function(data){
                if(data.result === 'success'){
                    alert("文件上传成功");
                }else if(data.result === 'fail'){
                    alert('文件上传失败:原因是' + data.reason);
                }
            },
            error: function(xhr){
                alert('文件上传失败:原因是' + xhr.status);
            }
        });//end ajax
    });//end event
});

后台处理部分

–需要注意的是:

  1. 先引入fs和path模块;
  2. 注意
  3. 注意$.ajax函数的头信息值设置为false;即contentType: false
app.post('/fileupload',function (req, res) {

    //将表单中name是name_txt的input元素中的文本内容取出
    var txtFromFront = req.body.name_txt;

    //获取上传的文件的文件名和绝对路径,注意先引入fs和path模块
    var oriNameOfFile = req.files.name_file.originalFilename || path.basename(req.files.name_file.ws.path);
    var oriPathOfFile = req.files.name_file.path;

    //定义文件的输出路径,我在此处没有改变上传的文件名,具体可以按照需求改变输出路径和文件名
    var targetPathOfFile = '/Music_Lib/public/demo_file/' + oriNameOfFile;

    //读取和输出文件到目标路径
    fs.readFile(oriPathOfFile,function (err, data) {

        fs.writeFile(targetPathOfFile,data,function (err) {

            if(err){
                console.log('文件在存储过程中出错了:' + err);

                res.send({result:"fail",reason:"保存文件失败"});//将消息发送(回复)给请求的ajax
            }else {
                console.log('File saved successfully!');

                res.send({result:"success"});//将消息发送(回复)给请求的ajax
            }
        });
    });
});

以上。

1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:10249次
    • 积分:166
    • 等级:
    • 排名:千里之外
    • 原创:6篇
    • 转载:0篇
    • 译文:0篇
    • 评论:2条
    文章分类
    文章存档
    最新评论