Nuxt CNode：Node.js专业中文社区

ajax上传文件是怎么实现的

发布于 13 年前作者 jialezhang 39538 次预览最后一次回复是 13 年前来自

想用jquery发送请求到服务器，但是不知道选择文件之后，该用怎么样数据方式传送过去。看到jquery里面写的文件格式只有xml,html,json,jsonp,text等，其他的文件是要专程这些格式才可以的么，那么怎么去转呢，然后$.ajax{}该怎么去写，搜到的尽是form表单。貌似论坛的markdown上传图片中的是新创建了一个form表单，然后将file以post的方式交由upload.js处理的。有没有可能像这样的格式利用ajax上传，然后服务器返回文件存储的地址

然后js来发送请求？

15 回复

iln168

1楼•13 年前

我用javascript做了一个简单的文件上传，看能否对你有帮助。

var xhr = new XMLHttpRequest();
        xhr.addEventListener('progress', function(){
            console.log('progress');
        }, false);
        xhr.addEventListener('load', function(){
            console.log('load');
        }, false);
        xhr.open('post', '/upload', true);///upload为文件上传的接口

        var fd = new FormData();
        fd.append('upfile', photo.data.file);
        fd.append('money', money);
        fd.append('source', source);
        fd.append('filename', photo.data.name);

        xhr.send(fd);

jQuery方式好像有提供一个叫$.ajaxFileUpload的方式上传可以google一下。

javanode

2楼•13 年前

可以使用jquery.form 这个jquery插件

jialezhang

3楼•13 年前

这个是文件内容是哪里传过去的哈，FormData是怎么去定义的？

那就是一定要使用form才可以提交？

fd.append('upfile', photo.data.file);

就是你要上传的文件可以直接把表单放进去，你可以查看一下FormData方法，不过好像只支持html5

@iln168 好的。多谢啦

@jialezhang 下面代码就是我的思路，你可以参考一下

$(function(){
          $('#test').change(function(){
              var file = this.files[0];
              var formData = new FormData();
              formData.append('filename', file);

              $.ajax({
                  url : '/upload',
                  type : 'POST',
                  data: formData
              });

          });
      });