`
s343174147
  • 浏览: 33368 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

ajaxSubmit上传文件出现下载提示框问题的解决方法和分析

阅读更多

今天在使用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就有可能出现下载提示框。

分享到:
评论

相关推荐

    ssm_ajaxsubmit-ajax提交-模态对话框-ajax上传文件

    传统的表单提交方式无法处理文件上传,因为HTTP协议的GET和POST请求无法处理大文件,而Ajax正好解决了这个问题。Ajax文件上传通常结合FormData对象来实现。在用户选择文件后,将文件添加到FormData对象,然后通过...

    HTML多文件上传插件,可一次上传多个文件.zip

    最后,"fileupload"可能是指其他文件上传相关的资源或技术,如jQuery File Upload插件,它也是一个强大的文件上传解决方案,支持多文件上传、进度条显示等功能。 综上所述,这个压缩包提供的资源涵盖了HTML多文件...

    Extjs2.x 实现文件上传组件

    通常,我们会使用AjaxSubmit来异步上传文件,这样可以避免页面刷新。以下是如何配置FormPanel: ```javascript var formPanel = new Ext.FormPanel({ title: '文件上传', bodyStyle: 'padding: 10px', items: ...

    上传文件返回的json数据会被提示下载问题解决方案

    总结来说,要解决上传文件返回JSON数据被提示下载的问题,关键在于: 1. 服务器端正确设置MIME类型,当使用JSONP时为`application/javascript`,否则为`application/json`。 2. 前端在使用`ajaxForm`或类似方法发送...

    自写上传图片并页面上预显demo

    在IT行业中,图片上传功能是网站和应用程序中常见的交互元素,尤其在社交媒体、电商和内容管理系统等场景下不可或缺。这个“自写上传图片并页面上预显demo”提供了一个使用AJAX技术实现实时图片上传并预览的示例,其...

    jquery实现上传文件进度条

    当用户点击“上传”按钮时,我们使用jQuery的`ajaxSubmit`方法来发起异步文件上传请求,并监听`uploadProgress`事件来更新进度条: ```javascript $(function() { $("#uplodsss").click(function() { $('#...

    JQuery提交表单Form.js官方插件介绍借鉴.pdf

    以上代码会在表单提交时通过Ajax方式发送数据,成功后弹出提示框。 Form.js提供了一些关键方法,以方便地处理表单操作: 1. `ajaxForm`: 这个方法会添加所有必要的事件监听器,为Ajax表单提交做好准备。它不是用来...

    jquery表单提交

    jQuery 表单提交是网页开发中的一个重要功能,它允许用户在不刷新整个页面的情况下与服务器交换数据。在jQuery中,有一个名为`form....无论是处理简单的文本输入还是复杂的文件上传,`form.js`都能提供便捷的解决方案。

    ajaxForm中文文档

    上述代码会在表单提交时触发Ajax请求,成功后弹出提示框。 ### 二、AjaxForm的详细使用方法和API 1. **ajaxForm** 方法:此方法用于设置表单的Ajax提交。它会添加必要的事件监听器,但不会立即提交表单。通常在`$...

    jquery.js+jquery.form.js 插件

    2. **上传文件**: 该插件支持文件上传,即使在老版本的浏览器中,也能处理多文件上传和进度条显示。 3. **表单序列化**: 提供了`serialize()`和`serializeArray()`方法,将表单数据转换为URL编码字符串或JSON格式,...

    Jquery的表单插件

    3. **在线文件上传**:例如图片、文档上传,可以显示上传进度,用户可随时取消操作。 4. **无刷新搜索**:在搜索框中输入关键词,实时获取并展示搜索结果。 ### 五、进阶使用 jQuery Form插件还支持其他高级功能,...

    jquery.form.js

    使用`jquery.form.js`时,首先需要引入jQuery和`jquery.form.js`,然后可以通过jQuery的选择器找到表单元素,调用`.ajaxSubmit()`或`.submit()`方法来实现Ajax提交。例如: ```javascript $(document).ready...

    jquery form表单美化插件

    除了基本的AJAX提交功能,jQuery Form插件还支持多种自定义选项和方法,如设置提交数据类型(如JSON或XML)、定义HTTP请求头、设定超时时间等。这为开发者提供了极大的灵活性,可以根据项目需求定制化表单行为。 在...

Global site tag (gtag.js) - Google Analytics