您的位置：首页 > Web前端 > JQuery

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

2017-12-12 17:09 961 查看

关键字：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="上传" onclick="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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航