如何使用 ajax 提交文件上传表单
How to submit file upload form with ajax?
可能的重复项:
阿贾克斯文件上传
是否可以使用 JQuery 编写一个 ajax 请求来"提交"带有文件字段的表单?我想这样做,因为这样我就可以让用户在不离开当前页面的情况下上传文件。
我应该如何编写 $.ajax(( 调用? 特别是我应该如何设置 ajax 调用文件字段?
编辑:我只想使用核心的JQuery函数,没有插件。
谢谢。
为了保持与最广泛的浏览器的兼容性,这需要通过隐藏的iframe来完成。
下面是一些示例代码来演示我的意思:
<iframe name="my_iframe" id="my_iframe" style="display: none;"></iframe>
<form action="/next_step.php" method="post" target="my_iframe" entype="multipart/form-data">
<input type="file" name="file_upload" />
<input type="button" id="upload_btn" value="Upload file" />
<label for="name">Name</label>
<input type="text" name="name" id="name" />
<input type="submit" value="Next step" />
</form>
<script type="text/javascript">
var btn = document.getElementById('upload_btn');
btn.onclick = function(){
var form_elem = document.forms[0];
// direct file uploads through the hidden iframe
form_elem.action = '/test_file.php';
form_elem.target = 'my_iframe';
// submit the form
form_elem.submit();
};
</script>
有一些项目可以使这更容易,例如 Plupload
> 这很难。使用已经存在的服务要好得多。
我最近在一个网站上这样做了,因为我需要提交整个表单而无需重新加载页面,而 uploadify 是我找到的最好的 AJAX 文件上传器。
相关文章:
- 如何使用WCF服务和javascript表单post上传.doc文件
- 在不同的文件中使用Javascript获取表单数据
- 有什么“;错误的”;将javascript放在asp.net表单上,而不是放在单独的文件中
- 用PHP发送html表单和文件附件
- 从表单中动态生成一个字符串,传递给通过AJAX加载的PHP文件
- Firefox,如何提交表单触发文件下载,但停留在网页上
- 使用node-js上传文件,并将表单信息存储在数据库(mysql)中
- html5拖放文件-在提交整个表单时上传
- 表单文件中已上载mp3的标题
- 如何在模式窗口中从html表单文件类型打开图像
- 尝试将 Dropbox 文件上传 API 链接到基本的 HTML 表单文件输入
- PHP 表单 - 文件上传不起作用
- 在 IE11 中未正确重置表单文件输入
- HTML 表单文件中的行号与文本区域中的行号之间的对应关系
- 如何在开机自检前操作表单文件输入
- 在AngularJS中为表单文件上传添加简单的验证
- 使用jQuery检测表单文件中的更改
- 隐藏表单文件POST在javascript
- 使用PHP检查页面加载时是否存在表单文件
- 使用HTML5技术操作和上传表单文件数据