使用jquery.form插件的ajaxSubmit方法上传文件

关键字:IE8,jquery.form.js,ajaxSubmit,文件上传

由于众所周知的原因,现在还有很多提倡信息化的事业单位还在使用IE10以下版本的IE浏览器,兼容问题是非常蛋疼且令人抓狂的,我遇到的这个问题就是IE10-不支持FormData对象,表单提交又会使页面跳转,无法满足需求。


解决方案:使用ajaxSubmit来上传文件,这个方法在jquery.form.js这个插件中,下载地址:http://xiazai.jb51.net/201605/yuanma/jquery.form.3.5(jb51.net).rar

或去官网下载,我使用的是3.5版本,jquery是jquery-1.8.2.js (1.9以上放弃IE10-了)

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Form Page</title>
<script src = "jquery-1.8.2.js"></script>
<script src = "jquery.form.js"></script>
</head>
<body>
<h1>文件上传</h1>
    <h2>ajax上传</h2>
      <form id= "uploadForm">  
          <p >上传文件: <input type="file" name="file" id="file"/></ p>         
          <input type="button" value="上传" οnclick="submitImport()" />
           <p id ="location" >文件位置:</p>
      </form>    
</body>

<script>
function submitImport(){
            $('#uploadForm').ajaxSubmit({
            type: 'post', // 提交方式 get/post
            url: 'wsg-webapp/files/upload', // 需要提交的 url
            success: function(data) { // data 保存提交后返回的数据,一般为 json 数据
                // 此处可对 data 作相关处理
                $("#location").append("<p>" + data+"</p>");
            }
        });
        return false; // 阻止表单自动提交事件
    }
</script>
</html>


版权声明:本文为qq_33437430原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。