Javascript 是否可以仅通过$.ajax(选项)或xhr.send(文件)上传文件?

Javascript 是否可以仅通过$.ajax(选项)或xhr.send(文件)上传文件?,javascript,jquery,ajax,html,file-upload,Javascript,Jquery,Ajax,Html,File Upload,我使用的是文件api和xhr2规范。我创建了一个上载程序(由旧浏览器的flash支持),它使用FormData和$.ajax(选项),其中带有file的FormData对象是options.data对象的一部分。一切正常 现在我决定删除FormData,因为浏览器支持不强。除此之外,我想不出上传文件的方法 var xhr = new XMLHttpRequest(); xhr.setRequestHeader("Cache-Control", "no-cache"); xhr.setReques

我使用的是文件api和xhr2规范。我创建了一个上载程序(由旧浏览器的flash支持),它使用
FormData
$.ajax(选项)
,其中带有
file
的FormData对象是
options.data
对象的一部分。一切正常

现在我决定删除
FormData
,因为浏览器支持不强。除此之外,我想不出上传文件的方法

var xhr = new XMLHttpRequest();
xhr.setRequestHeader("Cache-Control", "no-cache");
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
xhr.setRequestHeader("X-File-Name", file.name);
xhr.send(file);
这并没有返回我可以在递归函数中使用的承诺

我的代码如下:

   startUpload: function() {
        var that = this;
        that.recurseSend(that.queue);       
    },

    _initProgressListener: function (options, file) {
        var that = this;
        var xhr = $.ajaxSettings.xhr();
        options.contentType = 'multipart/form-data';        
        options.processData = false;
        options.type = 'POST';
        // WHAT TO DO HERE TO avoid FormData???? What ever I put into options.data - fails

        /* THIS WOULD WORK
        var formData = new FormData();
        formData.append('file', file);
        options.data = formData;
        */            

        if (xhr.upload && xhr.upload.addEventListener) {
            xhr.upload.addEventListener('progress', function (e) {
                that._onProgress(e, file);
            }, false);
            options.xhr = function () {
                return xhr;
            };
        }
    }, 

    recurseSend: function (queue) { 
        var file = queue.pop();
        if(file != undefined) {
            var that = this;
            var options = that.options;    
            that._initProgressListener(options, file);

            var send = function() {
                jqXHR = ($.ajax(options)).done(function(result, textStatus, jqXHR) {
                        that._onDone(result, textStatus, jqXHR, file);
                        queue.stats['successful_uploads']++;
                    }).fail(function(jqXHR, textStatus, errorThrown) {
                        that._onFail(jqXHR, textStatus, errorThrown, file);
                        queue.stats['upload_errors']++;
                    }).always(function(result, textStatus, jqXHR) {
                        that._onAlways(result, textStatus, jqXHR, file);
                        queue.stats['files_queued']--;
                        that.recurseSend(queue);
                    });
                    return jqXHR;
            };

            this._beforeSend(file);              
            return send();
        }
    },
简而言之,
$.ajax(options)
解析为
xhr.send(formData)
如果
options.data=formData
,那么如何将其解析为
xhr.send(file)

编辑:我正在玩它,如果我设置了options.data=file;然后,$.ajax(选项)执行xhr.send(文件);但是有错误
error:INVALID\u STATE\u ERR:DOM异常11

请求作为后多部分/表单数据请求发送,但没有包含文件的多部分正文

如果我把它放入
options.data={file:file}
无论
processData
属性是否设置为true,它都是序列化的。

如果不经过iFrame,您似乎无法完成此操作。在我链接的答案中似乎有一些有用的代码片段,还有一些插件可以帮你实现

*编辑,因为我收到了对它的评论*

是的,这是可能的--但是10以下没有IE支持

这里有一个教程:


无论何时处理从用户计算机上载任意数据的问题,答案通常是“不,如果可以,那就是一个bug”

我觉得这件事会受到违反安全规定的保护。您不能更改文件输入控件的值或对其执行许多其他操作,包括读取文件或其内容的真实路径。此外,在某些平台上,如果没有弹出安全对话框(通过activex控件),您甚至没有文件大小(即,我在看您)。考虑到所有这些问题,我可能会想说,即使您找到了解决方案,它也可能在将来被视为一个bug并被删除或更改


换句话说,我不认为这是一件安全的事情,除非你找到一个信誉良好的来源明确支持它。。。就像chromium开发博客。

我自己也使用了valums ajax上传程序。您可以从这里获得: . 它工作得很好。我不知道具体的实施细节,但这里有一个非常简短的描述:

“该插件使用XHR在FF3.6+、Safari4+、Chrome中使用进度条上载多个文件,并在其他浏览器中使用隐藏的基于iframe的上载,在任何地方都提供了良好的用户体验。”

所以听起来很接近你想要的。下面是从服务器角度(从server/readme.txt)描述其工作方式的另一点信息:

  • 对于IE6-8、Opera和其他浏览器的旧版本,您可以将文件作为 您通常使用常规表单基本上载

  • 对于使用进度条上传文件的浏览器,您需要获取原始文件 发布数据并将其写入文件


  • 因此,它需要在服务器端进行特殊处理。幸运的是,它附带了几个参考服务器端实现(perl、php和java),因此不会有太多麻烦。Happy ajax upload:)

    您可以使用
    FileReader
    或类似API从读取的HTML5文件数据手动生成用于上传的MIME数据。签出:。这或多或少可以做到这一点,尽管这取决于
    getAsBinary()
    ——将其更改为也能够使用
    FileReader
    readAsBinaryString()
    可能更兼容跨浏览器


    请注意,这在IE7/8中仍然根本不起作用,正如其他人所说,如果不使用Flash或iFrame,就无法做到这一点。也就是说,如果您使用的是文件,那么您可能根本不关心IE7或IE8…

    对不起,我想问的是这种方式是否可行。它与xhr.send(formData)一起工作;要将其解析为xhr.send(文件),只需正确设置即可。我只是不知道怎么做,调试时很难找到它。是的,没错。S0据我所知,使用ajax您无法上传文件。但是,您可以使用iframe或flash向用户显示它是以ajaxy的方式完成的。您可以使用Formdata,也可以使用文件,就像lisa试图做的那样,但我相信jQuery不支持它。这里有一个例子:这(以及链接的问题)是误导性的,你可以通过ajax/xhr2上传文件-这取决于浏览器对课程的支持。请阅读一些内容,而不是传播你的知识。。。令人惊叹的!我不知道这些。我指的是你在这里看到的攻击和警告。许多w3c建议从未得到实施,或在缺陷暴露后被合法删除:。因此,尽管存在这些草案,但我认为必须考虑与此功能相关的漏洞历史,以确定此功能是否可以依赖或将要实现;这就是为什么我特别尊重浏览器组,而不是w3c。恐怕我否决了这一点,因为它不准确。事实上,XHR2、FormData、File、FileReader和类似的API已经由Chrome、Firefox甚至IE9/10实现了一段时间,并且仍然依赖于用户对文件的选择。特别是,当用户必须显式选择文件时,通过启用直接访问,而不是强迫web开发人员在能够在客户端读取文件之前跳过将文件上载到服务器的过程,不会增加任何真正的安全漏洞。虽然我在理论上同意你的观点,但atta的创新