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

原创 2016年06月01日 22:25:54

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
            }
        });
    });
});

以上。

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

nodejs操作mongodb数据库(mongoose)

准备在上一篇的基础上,通过npm安装mongoose。关于mongooseMongoose是MongoDB的一个对象模型工具,是基于node-mongodb-native开发的MongoDB node...
  • zxc123e
  • zxc123e
  • 2016年11月25日 16:35
  • 2876

express 获取数据后渲染

express 获取数据后渲染页面。。。

html5+FormData 实现ajax文件上传

大家都知道在html4时代,上传只能使用表单post提交方式,无法使用ajax(XMLHttpRequest )直接进行表单提交。但在HTML 5的概念形成后,W3C开始考虑标准化XMLHttpR...

HTML5利用FormData对象实现显示进度条的文件上传【译】

这篇文章是我翻译的外文,非本人原创 网上看到很多博客都有转载这篇文章 不过转载的都是英文 所以我就决定翻译一下 (翻译和格式化也耗费了一番心血 (~﹃~)~zZ) 英文能力有限,大家凑合看吧...

HTML5利用FormData对象实现显示进度条的文件上传【转】

来自: 这篇文章是我翻译的外文,非本人原创  网上看到很多博客都有转载这篇文章  不过转载的都是英文  所以我就决定翻译一下  (翻译和格式化也耗费了一番心血 (~﹃~)~zZ)  英文能力有限,...

利用html5的FileReader对象实现图片预览,利用FormData对象结合struts2实现无刷新文件上传(多参数)

1、页面内容如下:                                                         文件内容变化就调用getImgUrl方法,获取变化后的文件,然...
  • lizi530
  • lizi530
  • 2016年06月17日 10:48
  • 1981

使用PHP和HTML5 FormData实现无刷新文件上传教程

这篇文章主要介绍了使用PHP和HTML5 FormData实现无刷新文件上传教程,本文先是分解了程序的编写步骤,最后给出一个完整示例,需要的朋友可以参考下 无刷新文件上传是一个常见而又有点复...

HTML5 jQuery+FormData 异步上传文件,带进度条

利用jQuery和html5的FormData异步上传文件的好处是: 实现很简单很方便地支持进度条很方便地进行扩展和美化 先看看效果图: 图片上传后的结果: ...

html5+ajax文件上传struts2接收

  • 2015年09月17日 20:29
  • 76KB
  • 下载

使用APICloud编写优雅的HTML5代码《二》:ajax、文件上传

摘要: 对于ajax这个API而言,它实际上是有非常多的参数可供开发者选择的,以此满足各种特殊的需求,包括:url、method、cache、timeout、dataType、charset、head...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Node和express中利用Jquery的$.ajax和HTML5的FormData完成文件上传示例
举报原因:
原因补充:

(最多只允许输入30个字)