`
wy_2017
  • 浏览: 44037 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

使用 new FormData 上传文件导致IE不兼容的问题

    博客分类:
  • java
阅读更多
好吧,直奔主题!
多数浏览器都支持new FormData($( "#fileUploadForm")[0]),但是IE10下却显示
FormData未定义

  //AJAX文件上传
        $.ajax({
            url: path + "/fileManager/uploadFile",
  type: 'post',
            data:  new FormData($( "#fileUploadForm")[0]),
            async: true, 
            cache: false, 
            contentType: false,  // 告诉jQuery不要去处理发送的数据
            processData: false,  // 告诉jQuery不要去设置Content-Type请求头
            success: function (data) {
            mini.hideMessageBox(messageid);
            mini.confirm(data.msg ,"提示",function delConfirm(action){
            window.CloseOwnerWindow();
            });
             },
            error: function (data) {
            mini.hideMessageBox(messageid);
            var msg = data.msg;
            if(null == msg || "" == msg || "undefined" == msg){
            msg = "操作出现异常";
            }
          mini.confirm(msg ,"提示",function delConfirm(action){
            window.CloseOwnerWindow();
            });
            }
        });
}

怎么办呢?只有换一个提交策略了ajaxSubmit
$("#batchAdd").ajaxSubmit({
          type: 'post', 
          url: path+'/sysInfo/importSysInfo', 
          success: function (data) {
          var msssage = JSON.parse(data);
              mini.alert(msssage.msg ,"提示",function ImportSysConfirm(action){
         window.CloseOwnerWindow();
         });
          },
          error: function (data) {
        var msssage = JSON.parse(data);
        var msg = msssage.msg;
          if(null == msg || "" == msg || "undefined" == msg){
          msg = "操作出现异常";
          }
        mini.alert(msg,"提示",function ImportSysConfirm(action){
          window.CloseOwnerWindow();
          });
          }
      }); 

  不过这里的时候也出现了一个问题,由于返回的时候JSON,IE8总是要提示是否下载JSON文件
好办取配置文件里配一下
<mvc:annotation-driven>       
        <mvc:message-converters>   
            <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">   
                <property name="supportedMediaTypes">   
                    <list>                         
                        <value>text/html;charset=UTF-8</value><!-- 避免IE出现下载JSON文件的情况 -->   
                    </list>   
                </property>   
                <property name="objectMapper">   
                    <bean class="com.fasterxml.jackson.databind.ObjectMapper"> 
                        <!-- 处理responseBody 里面日期类型 -->   
                        <property name="dateFormat">   
                            <bean class="java.text.SimpleDateFormat">   
                                <constructor-arg type="java.lang.String" value="yyyy-MM-dd HH:mm:ss" />   
                            </bean>   
                        </property>  
                        <!-- 为null字段时不显示 --> 
                        <property name="serializationInclusion"> 
                            <value type="com.fasterxml.jackson.annotation.JsonInclude.Include">NON_NULL</value> 
                        </property>  
                    </bean>   
                </property>   
            </bean>   
        </mvc:message-converters>   
</mvc:annotation-driven>

大功告成
分享到:
评论

相关推荐

    FormData实现文件上传(前端+后端)

    对于旧版本的IE浏览器,可以使用`ActiveXObject`来模拟文件上传,但这种方式已经过时,不推荐使用。现代浏览器普遍支持`FormData`,因此尽量避免对IE8的兼容。 ### 后端部分 1. **接收文件**:在服务器端,我们...

    基于SpringMVC的文件上传(兼容IE8)

    由于IE8的AJAX提交文件不兼容,我们可以借助jQuery Form插件实现异步文件上传。首先引入jQuery和jQuery Form插件的库,然后编写JavaScript代码: ```javascript $("#uploadForm").ajaxForm({ success: function...

    图片上传兼容IE

    5. 利用FormData和Blob:在处理多文件上传时,FormData和Blob API是很好的工具,但IE10以下不支持。可以使用polyfill库(如es6-promise、fetch、FormData等)来模拟这些功能。 6. 限制文件类型和大小:在客户端进行...

    FormData:FormData支持其中window.FormData未定义

    然而,在某些情况下,你可能会遇到"FormData:FormData支持其中window.FormData未定义"的错误提示,这通常是由于浏览器不支持FormData,或者你的代码环境中没有正确地引入FormData导致的。 首先,我们要理解...

    java上传图片实时显示,兼容ie11

    注意,为了兼容IE11,我们需要确保服务器端支持多部分请求,因为IE11不支持FormData对象的`append`方法。 最后,为了让图片实时显示,服务器需要返回图片的URL或Base64编码的图片数据。你可以将图片保存到服务器的...

    兼容ie,Firefox的文件上传

    标题 "兼容ie,Firefox的文件上传" 涉及的核心知识点是实现跨浏览器的文件上传功能,特别是针对Internet Explorer(IE)和Firefox这两个主流浏览器的兼容性问题。在Web开发中,由于不同浏览器对HTML、CSS和JavaScript...

    IE与非IE浏览器调用PC摄像头拍摄并且上传

    这个话题涉及到不同浏览器的API支持和兼容性问题,尤其是IE与其他非IE浏览器之间的差异。以下是关于这一主题的详细讲解。 一、WebRTC API WebRTC(Web Real-Time Communication)是实现浏览器之间实时通信的一组...

    不用form提交表单,用ajax上传文件

    虽然大多数现代浏览器都支持FormData和File API,但在旧版本的IE中可能存在问题。确保你的代码有适当的降级策略,或者使用polyfill库来增强旧浏览器的支持。 6. **进度条**: 如果需要显示上传进度,可以监听`...

    通过Ajax使用FormData对象无刷新上传文件方法

    4. **浏览器兼容性**:虽然现代浏览器(如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+)已经支持FormData对象,但在处理兼容性问题时,需要额外的考虑。对于不支持FormData的老版本浏览器,可能需要采用...

    jquery实现图片即时上传

    // 使用IE兼容代码 } } }); $('#uploadBtn').click(function() { var formData = new FormData(); var files = $('#imageInput')[0].files; for (var i = 0; i ; i++) { formData.append('images[]', ...

    通过Ajax方式上传文件使用FormData进行Ajax请求

    【Ajax方式上传文件使用FormData】 在现代Web开发中,用户经常需要在不刷新整个页面的情况下上传文件,这就需要用到Ajax技术。传统的HTML表单提交虽然简单,但会触发页面的完整刷新,导致用户体验下降。为了解决这...

    IE9 elementUI文件上传的问题解决

    由于IE9对于新标准的支持不全,导致在使用Element UI自带的上传组件进行文件上传时,会遇到一些问题。特别是无法使用现代浏览器中常用的FormData对象,因为在IE9中,FormData API是不被支持的。 首先,为了解决在IE...

    HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法

    然而,IE6至IE8并不认识这些标签,导致它们无法正确地呈现和样式化。 HTML5 Shiv通过JavaScript来模拟这些新标签的存在,使得IE6/IE7/IE8可以识别并应用CSS样式。它的工作原理是动态创建这些标签的DOM元素,使得...

    ajax 无刷新上传图片兼容所有浏览器

    总的来说,“ajax无刷新上传图片并兼容所有浏览器”涉及的知识点包括:XMLHttpRequest对象的使用、FormData对象的创建和操作、Ajax请求的生命周期管理、浏览器兼容性处理、以及前端的反馈机制。通过理解这些知识点,...

    Ajax 文件上传

    虽然现代浏览器普遍支持Ajax文件上传,但老版本的IE可能需要使用Flash或其他技术来实现。 综上所述,Ajax文件上传结合进度条是提升用户体验的有效手段,其涉及的技术包括XMLHttpRequest、FormData、事件监听以及...

    深入理解HTML的FormData对象

    - **文件上传**:与File API结合,实现客户端文件上传。 - **API调用**:在RESTful API中发送复杂的请求体。 总结,HTML的FormData对象为开发者提供了强大的表单数据处理能力,使得在JavaScript中操作和发送表单...

    拖拽文件、图片上传

    需要注意的是,为了使拖放功能在所有浏览器中都能正常工作,可能需要进行一些兼容性处理,例如添加对旧版IE的支持。此外,为了提供更好的用户体验,我们还应该在拖放过程中给出视觉反馈,比如改变拖放区域的样式或...

    上传图片并且浏览--各种浏览器都兼容的代码

    为了实现这一功能,开发者需要考虑多种浏览器的兼容性问题,确保代码在不同的浏览器环境下都能正常工作。以下是一些关于如何实现这个功能的关键知识点: 1. **HTML表单**:首先,我们需要在HTML中创建一个文件上传...

    JQuery无刷新上传并显示图片

    在jQuery中,可以通过`new FormData()`创建一个FormData实例,然后使用`append()`方法添加文件。 3. **File API**:HTML5引入了File API,它允许我们访问和操作用户选择的文件。在选择文件后,可以使用`input[type=...

    jquery异步上传

    2. **创建FormData**:使用`new FormData()`创建一个FormData对象,并将文件添加到其中。 3. **设置Ajax请求**:配置jQuery的`$.ajax()`或`$.post()`,包括URL、数据(FormData对象)、类型(通常是`multipart/form-...

Global site tag (gtag.js) - Google Analytics