相关疑难解决方法(0)

我想用jQuery异步上传一个文件.这是我的HTML:

<span>File</span>
<input type="file" id="file" name="file" size="10"/>
<input id="uploadbutton" type="button" value="Upload"/>

在这里我的__CODE__代码:

$(document).ready(function () {
    $("#uploadbutton").click(function () {
        var filename = $("#file").val();

        $.ajax({
            type: "POST",
            url: "addFile.do",
            enctype: 'multipart/form-data',
            data: {
                file: filename
            },
            success: function () {
                alert("Data Uploaded: ");
            }
        });
    });
});

我只获取文件名,而不是上传文件.我该怎么做才能解决这个问题？

现行解决方案

我正在使用jQuery Form Plugin上传文件.

我正在尝试将3D模型加载到Three.js中JSONLoader,并且该3D模型与整个网站位于同一目录中.

我收到了"Cross origin requests are only supported for HTTP."错误,但我不知道是什么导致它,也不知道如何解决它.

的XMLHttpRequest的2级标准(还是工作草案)定义FormData的接口.此接口允许将File对象附加到XHR请求(Ajax请求).

顺便说一句,这是一个新功能 - 在过去,使用了"隐藏iframe技巧"(在我的另一个问题中阅读).

这就是它的工作原理(例子):

var xhr = new XMLHttpRequest(),
    fd = new FormData();

fd.append( 'file', input.files[0] );
xhr.open( 'POST', 'http://example.com/script.php', true );
xhr.onreadystatechange = handler;
xhr.send( fd );

where input是一个<input type="file">字段,handler是Ajax请求的成功处理程序.

这在所有浏览器中都很漂亮(除了IE之外).

现在,我想使这个功能与jQuery一起使用.我试过这个:

var fd = new FormData();    
fd.append( 'file', input.files[0] );

$.post( 'http://example.com/script.php', fd, handler );

不幸的是,这不起作用(抛出"非法调用"错误 - 截图在这里).我假设jQuery需要一个表示form-field-names/values的简单键值对象,而FormData我传入的实例显然是不兼容的.

现在,由于可以将FormData实例传入xhr.send(),我希望它也可以使它与jQuery一起使用.

更新:

我在jQuery的Bug Tracker上创建了一个"功能票".它在这里:http://bugs.jquery.com/ticket/9995

我被建议使用"Ajax prefilter"...... …

这是面条刮痕.

请记住,我们有HTML5本地存储和xhr v2,什么不是.我想知道是否有人能找到一个有效的例子,甚至只是给我一个是或否的问题:

是否可以使用新的本地存储(或其他)预先调整图像大小,以便没有关于调整图像大小的线索的用户可以将他们的10mb图像拖到我的网站中,然后使用新的本地存储调整大小.然后以较小的尺寸上传它.

我完全知道你可以用Flash,Java小程序,活动X来做...问题是如果你能用Javascript + Html5做.

期待对此的回应.

Ta现在.

假设我在页面上有这个元素:

<input id="image-file" type="file" />

这将创建一个按钮,允许网页用户通过浏览器中的"文件打开..."对话框选择文件.

假设用户单击所述按钮,在对话框中选择一个文件,然后单击"确定"按钮关闭对话框.

选定的文件名现在存储在:

document.getElementById("image-file").value

现在,假设服务器在URL"/ upload/image"处理多部分POST.

如何将文件发送到"/ upload/image"？

另外,如何收听文件上传完成的通知？

不可否认,Stack Overflow上存在类似的问题,但似乎没有完全符合我的要求.

以下是我要做的事情:

• 上传整个数据形式,其中一个是单个文件
• 使用Codeigniter的文件上传库

直到这里,一切都很好.数据在我需要时进入我的数据库.但我也想通过AJAX帖子提交我的表格:

• 使用原生HTML5文件API,而不是Flash或iframe解决方案
• 优选地与低级.ajax()jQuery方法接口

我想我可以想象如何通过使用纯javascript在字段的值更改时自动上传文件来实现此目的,但我宁愿一下子在jQuery中提交所有内容.我认为通过查询字符串是不可能的,因为我需要传递整个文件对象,但我现在有点迷失在这一点上做什么.

这可以实现吗？

好像我没有清楚地传达我的问题.我需要发送一个文件(使用AJAX),我需要使用Nginx HttpUploadProgressModule获取文件的上传进度.我需要一个很好的解决方案.我尝试过使用jquery.uploadprogress插件,但我发现自己不得不重写它以使其在所有浏览器中工作并使用AJAX发送文件.

我只需要执行此操作的代码,它需要在所有主流浏览器(Chrome,Safari,FireFox和IE)中运行.如果我能得到一个可以处理多个文件上传的解决方案,那就更好了.

我正在使用jquery.uploadprogress插件从NginxHttpUploadProgressModule获取文件的上传进度.这是一个facebook应用程序的iframe内部.它适用于Firefox,但它在chrome/safari中失败了.

Uncaught ReferenceError: progressFrame is not defined
jquery.uploadprogress.js:80

编辑2:
Jake33帮我解决了第一个问题.第一个给出如何使用ajax发送文件的响应的人将获得100分.

当我使用XMLHttpRequest时,使用正确上传文件FormData.但是,当我切换到时jQuery.ajax,我的代码中断了.

这是工作原始代码:

function uploadFile(blobFile, fileName) {
    var fd = new FormData();
    fd.append("fileToUpload", blobFile);
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "upload.php", true);
    xhr.send(fd);
}

这是我不成功的jQuery.ajax尝试:

function uploadFile(blobFile, fileName) {
    var fd = new FormData();
    fd.append("fileToUpload", blobFile);
    var xm = $.ajax({
        url: "upload.php",
        type: "POST",
        data: fd,
    });
}

我究竟做错了什么？如何使用AJAX正确上传文件？

我想使用Ajax和php上传文件.我有一个带<input type="file">标签的表格.我希望当用户浏览文件并点击提交时,无需刷新即可上传文件.我该怎么做？如果刷新发生没关系,但我想借助ajax上传文件.

我需要使用必须在IE9中支持的ajax上传文件.我正在使用这里提到的FormData .我的代码看起来像这样:

var files = new FormData();
JQuery.each($('#file')[0].files, function (i, file) {
    files.append('file', file);
});

$.ajax({
    type: "POST",
    url: '/url',
    cache: false,
    contentType: false,
    processData: false,
    data: files,
    ...
});

这在Safari和Firefox中工作正常,但在IE9中失败,因为IE9不支持FormData.我尝试通过设置发送作为文件:

data: $('#file')[0].files[0]
contentType: 'multipart/form-data'

这会失败,因为数据是以url编码的形式发送的,并且无法在java端解析.任何有关如何解决这个问题的帮助或指针将不胜感激.我需要适用于所有浏览器的东西.

编辑:我不需要任何上传进度条,因为文件通常很小.我不需要上传多个文件.我只需要一个文件上传.