javascript - Ajax上传文件,有什么好的方案?

 手机用户2502856237 发布于 2022-11-08 16:52

Ajax异步上传文件是怎么实现的呢?

  1. 包装成Form表单?

  2. 使用Flash?(感觉flash淘汰该弃用了)

  3. 其他?

不知道大家怎么实现的?用插件的话,插件的具体原理是什么呢?

======== 6:15 ========

补充下内容:

刚才看stackoverflow的文章jQuery Ajax File Upload

有提到两种方法:

  1. 使用IFrame.

  2. 使用XHR2,支持FormData,上传文件,但是兼容性的话:IE 10+, Firefox 4.0+, Chrome 7+, Safari 5+, Opera 12+

9 个回答
  • 看看这个基于Nodejs的大文件上传:http://www.famanoder.com/h5la...
    http://www.famanoder.com/boke...

    2022-11-12 01:41 回答
  • 一下代码从我的项目中剥离出来的, 大概就是基于jQuery封装了一下http请求,下面的代码是其中文件上传的部分。
    调用方法示例如下:

        var formData = new FormData();
        formData.append("file", event.target.file.files[i]);
        formData.append("key", new Blob(
                data,
                {type: "application/json"}
            ));
        http.request
          .upload(url, formData)
          .success(function (result) {
              // 请求成功的处理
          })
          .sendUpload();
        http = {};
        
        function Request(method, url) {
            this.method = method;
            this.url = url;
            this._data = null;
            this._formData = null;
            this._dataType = 'json';
            this._contentType = null;
            this._success = null;
            this._failure = null;
            this.error = function (xhr, textStatus, errorThrown) {
                // 错误时的处理
            }.bind(this);
        }
        
        Request.prototype.sendUpload = function () {
            var req = this;
            $.ajax({
                url: this.url,
                type: this.method,
                data: this._formData,
                dataType: this._dataType,
                processData: false,
                contentType: false,
                timeout: 300000,
                success: function (result, status, xhr) {
                    // 请求成功时的通用处理
                },
                error: this.error,
            });
        }
        
        http.request.upload = function (url, formData) {
            return new Request('POST', url).formData(formData).dataType('json');
        }
    2022-11-12 01:41 回答
  • plupload,七牛javascript端也是通过这个来上传图片的

    2022-11-12 01:41 回答
  • 用 iframe,感觉不是 AJAX 异步上传了吧?

    2022-11-12 01:41 回答
  • 可以用百度的webuploader插件,很好用。附上网站:http://fex.baidu.com/webuploa...

    2022-11-12 01:41 回答
  • 就像你说的,一般用插件,比较方便,至于插件原理,你应该先去了解之后再提问。

    2022-11-12 01:41 回答
  • html5已经可以上传文件了
    http://blog.csdn.net/small_ri...

    2022-11-12 01:41 回答
  • 可以直接使用表单。

    input(type='file')进行文件选择,再使用FormData进行Ajax数据传输,把input的文件数据加入。

    参考:FormData

    2022-11-12 01:41 回答
  • 文件上传一般来说有以下几种方法:
    传统flash上传
    隐藏iframe框上传
    表单数据提交
    HTML5的新工具——File API

    推荐后两种,File API推荐看看这篇文章https://segmentfault.com/a/11...

    2022-11-12 01:41 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有