今天在使用jquery.form插件的ajaxSubmit上传文件时,在IE、chorme下测试,老是出现下载文件的提示框,
在查看了jquery.form的源码时,发现了下面的代码:
if (options.iframe !== false && (options.iframe || shouldUseFrame)) { if (options.closeKeepAlive) { $.get(options.closeKeepAlive, function() { fileUploadIframe(a); }); } else { fileUploadIframe(a); } } else if ((hasFileInputs || multipart) && fileAPI) { fileUploadXhr(a); } else { $.ajax(options); }
在ajaxSubmit提交表单的时候,如果表单内有文件上传的话,会判断参数是否配置的iframe为false参数,如果没有,会用创建隐藏iframe方式提交表单,如果设定了iframe为false,则判断浏览器是否支持HTML5的fileAPI,支持就直接使用XHR方式提交,否则就当作普通表单提交。
所以因为是用隐藏iframe提交的表单,如果服务器返回的是“application/json”类型的数据,IE和Chrome默认是下载文件的,因为内容是返回给了iframe,而不是ajaxSubmit的success方法。在iframe加载了返回结果后,ajaxSubmit的success方法是去读取iframe的内容来转换成json对象使用。
解决办法就是,在ajaxSubmit提交表单的配置里面,增加一个参数,服务器端判断是否是ajaxSubmit提交过来的表单,是的话就返回“text/html”类型的内容,不是就可以返回“
application/json”的。
简单的说就是ajaxSubmit上传文件的话,返回的内容只能是网页内容的,否则IE就有可能出现下载提示框。
相关推荐
传统的表单提交方式无法处理文件上传,因为HTTP协议的GET和POST请求无法处理大文件,而Ajax正好解决了这个问题。Ajax文件上传通常结合FormData对象来实现。在用户选择文件后,将文件添加到FormData对象,然后通过...
最后,"fileupload"可能是指其他文件上传相关的资源或技术,如jQuery File Upload插件,它也是一个强大的文件上传解决方案,支持多文件上传、进度条显示等功能。 综上所述,这个压缩包提供的资源涵盖了HTML多文件...
通常,我们会使用AjaxSubmit来异步上传文件,这样可以避免页面刷新。以下是如何配置FormPanel: ```javascript var formPanel = new Ext.FormPanel({ title: '文件上传', bodyStyle: 'padding: 10px', items: ...
总结来说,要解决上传文件返回JSON数据被提示下载的问题,关键在于: 1. 服务器端正确设置MIME类型,当使用JSONP时为`application/javascript`,否则为`application/json`。 2. 前端在使用`ajaxForm`或类似方法发送...
在IT行业中,图片上传功能是网站和应用程序中常见的交互元素,尤其在社交媒体、电商和内容管理系统等场景下不可或缺。这个“自写上传图片并页面上预显demo”提供了一个使用AJAX技术实现实时图片上传并预览的示例,其...
当用户点击“上传”按钮时,我们使用jQuery的`ajaxSubmit`方法来发起异步文件上传请求,并监听`uploadProgress`事件来更新进度条: ```javascript $(function() { $("#uplodsss").click(function() { $('#...
以上代码会在表单提交时通过Ajax方式发送数据,成功后弹出提示框。 Form.js提供了一些关键方法,以方便地处理表单操作: 1. `ajaxForm`: 这个方法会添加所有必要的事件监听器,为Ajax表单提交做好准备。它不是用来...
jQuery 表单提交是网页开发中的一个重要功能,它允许用户在不刷新整个页面的情况下与服务器交换数据。在jQuery中,有一个名为`form....无论是处理简单的文本输入还是复杂的文件上传,`form.js`都能提供便捷的解决方案。
上述代码会在表单提交时触发Ajax请求,成功后弹出提示框。 ### 二、AjaxForm的详细使用方法和API 1. **ajaxForm** 方法:此方法用于设置表单的Ajax提交。它会添加必要的事件监听器,但不会立即提交表单。通常在`$...
2. **上传文件**: 该插件支持文件上传,即使在老版本的浏览器中,也能处理多文件上传和进度条显示。 3. **表单序列化**: 提供了`serialize()`和`serializeArray()`方法,将表单数据转换为URL编码字符串或JSON格式,...
3. **在线文件上传**:例如图片、文档上传,可以显示上传进度,用户可随时取消操作。 4. **无刷新搜索**:在搜索框中输入关键词,实时获取并展示搜索结果。 ### 五、进阶使用 jQuery Form插件还支持其他高级功能,...
使用`jquery.form.js`时,首先需要引入jQuery和`jquery.form.js`,然后可以通过jQuery的选择器找到表单元素,调用`.ajaxSubmit()`或`.submit()`方法来实现Ajax提交。例如: ```javascript $(document).ready...
除了基本的AJAX提交功能,jQuery Form插件还支持多种自定义选项和方法,如设置提交数据类型(如JSON或XML)、定义HTTP请求头、设定超时时间等。这为开发者提供了极大的灵活性,可以根据项目需求定制化表单行为。 在...