我可以使用以下jQuery代码使用Ajax请求的post方法执行文件上载吗?
$.ajax({
type: "POST",
timeout: 50000,
url: url,
data: dataString,
success: function (data) {
alert('success');
return false;
}
});
如果可能,我是否需要填写“数据”部分?这是正确的方法吗?我只将文件发布到服务器端 .
我一直在谷歌搜索,但我发现是一个插件,而在我的计划中,我不想使用它 . 至少目前 .
20 回答
使用XMLHttpRequest()确实可以上传AJAX . 没有必要的iframe . 可以显示上传进度 .
有关详细信息,请参阅:回答https://stackoverflow.com/a/4943774/873282以回答jQuery Upload Progress and AJAX file upload .
如果你想这样做:
比
https://github.com/lgersman/jquery.orangevolt-ampere/blob/master/src/jquery.upload.js
可能是你的解决方案 .
通过ajax无法上传文件 . 您可以使用IFrame上传文件,而无需刷新页面 . 你可以查看更多细节here
UPDATE:
使用XHR2,支持通过AJAX上传文件 . 例如 . 通过FormData对象,但不幸的是,所有/旧浏览器都不支持它 .
FormData支持从以下桌面浏览器版本开始 . IE 10,Firefox 4.0,Chrome 7,Safari 5,Opera 12
有关更多详细信息,请参阅MDN link
要获取所有表单输入,包括type = "file",您需要使用 FormData object . 在提交表单后,您将能够在调试器 - > network - > Headers中看到formData内容 .
通过ajax上传文件不再需要iframe . 我最近自己做了 . 看看这些页面:
Using HTML5 file uploads with AJAX and jQuery
http://dev.w3.org/2006/webapi/FileAPI/#FileReader-interface
更新了答案并将其清理干净 . 使用getSize函数检查大小或使用getType函数检查类型 . 添加了进度条html和css代码 .
如何使用Upload类
Progressbar html代码
Progressbar css代码
如果你想使用AJAX上传文件,这里是你可以用来上传文件的代码 .
这是上传文件的HTML
我已经很晚了,但我正在寻找一个基于ajax的图像上传解决方案,而我正在寻找的答案在这篇文章中有点分散 . 我解决的解决方案涉及FormData对象 . 我汇集了一个基本形式的代码 . 您可以看到它演示了如何使用fd.append()向表单添加自定义字段,以及如何在完成ajax请求时处理响应数据 .
上传html:
如果你正在使用php,这是一种处理上传的方法,包括使用上面html中演示的两个自定义字段 .
upload.php的
我用简单的代码处理了这些 . 您可以从here下载工作演示
对于您的情况,这些非常可能 . 我将逐步介绍如何使用AJAX jquery将文件上传到服务器 .
首先让我们创建一个HTML文件来添加以下表单文件元素,如下所示 .
其次创建一个jquery.js文件并添加以下代码来处理我们提交给服务器的文件
你完成了 . View more
简单上传表格
我通过ajax从预览中删除不需要的文件后实现了多文件选择,即时预览和上传 .
详细文档可在此处找到:http://anasthecoder.blogspot.ae/2014/12/multi-file-select-preview-without.html
演示:http://jsfiddle.net/anas/6v8Kz/7/embedded/result/
jsFiddle:http://jsfiddle.net/anas/6v8Kz/7/
使用Javascript:
使用jquery上传用户作为表单一部分提交的文件,请按照以下代码:
然后将表单数据对象发送到服务器 .
我们还可以将File或Blob直接附加到FormData对象 .
可以使用Ajax发布和上传文件 . 我正在使用
jQuery $.ajax
函数来加载我的文件 . 我试图使用XHR对象,但无法在服务器端使用PHP获得结果 .如您所见,您必须创建一个FormData对象,空或从(序列化? -
$('#yourForm').serialize())
现有表单,然后附加输入文件 .以下是更多信息: - How to upload a file using jQuery.ajax and FormData - Uploading files via jQuery, object FormData is provided and no file name, GET request
对于PHP过程,您可以使用以下内容:
使用隐藏的iframe并设置表单's target to that iframe'的名称 . 这样,提交表单时,只会刷新iframe .
为iframe的load事件注册了一个事件处理程序来解析响应 .
我的博客文章的更多细节:http://blog.manki.in/2011/08/ajax-fie-upload.html .
编辑:注意内容类型和进程数据你可以简单地用这个来通过Ajax上传文件......提交输入不能是外部表单元素:)
当您选择需要上传到服务器的文件时,您可以使用方法ajaxSubmit :),表单提交到服务器:)
使用FormData是许多答案所指示的方法 . 这里有一些代码可以很好地用于此目的 . 我也同意嵌套ajax块来完成复杂情况的评论 . 通过包含e.PreventDefault();根据我的经验,使代码更加跨浏览器兼容 .
是的,您可以,只需使用javascript获取文件,确保您将文件作为数据URL读取 . 在base64之前解析东西以实际获得基本64位编码数据然后如果你使用php或者实际上任何后端语言都可以解码base 64数据并保存到文件中,如下所示
当然你可能想要做一些验证,比如检查你正在处理的文件类型和类似的东西,但这是个主意 .
这是我想到的一个想法:
有一个表单,您可以将INPUT:File元素移动到 .
结果将发布到框架,然后您可以将获取的数据向上发送到您想要的图像标记,例如:
并加载页面 .
我相信它对我有用,并且取决于你可以做以下事情: