IE9 input 上传文件

最新推荐文章于 2022-09-15 10:08:47 发布

原创最新推荐文章于 2022-09-15 10:08:47 发布 · 796 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

IE9 专栏收录该内容

2 篇文章

订阅专栏

这篇博客介绍了如何使用jQuery.form.js库结合Ajax进行文件上传操作，包括处理IE9及以下版本的兼容性问题。在文件上传过程中，检查文件大小并进行错误处理。同时，提供了Ajax的GET、POST和FormData封装函数，以及获取URL参数和当前网址的辅助函数。

需要引用jquery.form.js

<script type="text/javascript" src="jquery.form.js"></script>

    <form id="uploadForm" method="post" enctype="multipart/form-data">
      <input type="text" name="fileID" :value="fileid" style="display: none;">
      <input id="uploadfile" name="file" @change='uploadFile()' ref="file" type="file" multiple value="上传文件"
             accept="application/pdf" style="display: none;">
    </form>

 uploadFile:function() {
        var that = this
        if (that.$refs.file.value == null || that.$refs.file.value == ""){
          return;
        }
        var IEVersion = that.IEVersion()
        var imgObj
        var size = 0;
        if (IEVersion=="IE9"){
          that.fileid = that.files[that.chooseIndex].file.fileid;
          var options = {
            url : '上传文件API',
            type: 'post',
            dataType:'text',
            success : function (res) {
              res = JSON.parse(res);
	      //重置表单（解决同一文件不能连续上传）
              var form = document.forms[0]
              form.reset();

              if (res == false) {
                alert("出错了，请稍后重试");
                return;
              }
              if (res.code != 200) {
                alert(res.message);
                return;
              } else {
		console.log("上传成功");
              }
            },
            error : function(err) {
              that.$refs.file.value = '';
            }
          }
          $('#uploadForm').ajaxSubmit(options);
        }else {
          imgObj = that.$refs.file.files[0];
          size = imgObj.size;
          size = (size / 1024 / 1024);
          if (size > 5) {
            that.$message('上传文件不能超过 5MB!');
            return;
          }
          var formData = new FormData();
          formData.append("fileID", fileID);
          formData.append("file", imgObj);
          ajaxFormData("上传文件API", formData, function (res) {
            res = JSON.parse(res);
            that.$refs.file.value = '';
            if (res == false) {
              that.$message.error('网络异常，请稍后刷新重试');
              return;
            }
            if (res.code != 200) {
              that.$message.error(res.message);
              return;
            } else {
		console.log("上传成功");
            }
          })
        }
      },

注意：
后台返回数据如果是Ajax类型，流览器会直接提示下载文件，打开文件是个json串。
解决方案：
dataType改成text类型，后台方法返回String类型的json串，如果需要用到json对象的话，用JSON.parse(str)转换即可。

AJAX封装

function ajaxGet(url, data, callback) {
    $.ajax({
        type: "GET",
        url: getHost() + url,
        contentType: "application/json; charset=utf-8",
        data: data,
        success: function (resp) {
            if (callback) {
                callback(resp);
            }
        },
        error: function (err) {
            callback(false)
        }
    })
}

function ajaxJson(url, data, callback) {
    $.ajax({
        type: "POST",
        url: getHost() + url,
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify(data),
        success: function (resp) {
            if (callback) {
                callback(resp);
            }
        },
        error: function (err) {
            callback(false)
        }
    })
}

function ajaxFormData(url, formData, callback) {
    $.ajax({
        type: "POST",
        url: getHost() + url,
        contentType: false,
        processData: false,
        data: formData,
        success: function (resp) {
            if (callback) {
                callback(resp);
            }
        },
        error: function (err) {
            callback(false)
        }
    })
}

function getURLParam() {
    var param = {};
    //获取URL
    var localObj = window.location;
    var params = localObj.search.substr(1);
    var arr = params.split("&");
    arr.forEach(function(item, index, array) {
        var keyvalue = item.split("=");
        param[keyvalue[0]] = keyvalue[1];
    })
    return param;
}

function getHost() {
    //获取当前网址
    var curWwwPath = window.document.location.href;
    //获取主机地址之后的目录
    var pathName = window.document.location.pathname;
    var pos = curWwwPath.indexOf(pathName);
    //获取主机地址
    var localhostPaht = curWwwPath.substring(0, pos);
    //获取带"/"的项目名，如：/test
    var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
    var requestPath = localhostPaht+projectName;
    return requestPath;
}

判断IE版本

      IEVersion: function () {
        var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
        var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1;
        var IeVersion;
        var IeNoSupportFlag = false;
        if (isIE) {
          var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
          reIE.test(userAgent);
          var fIEVersion = parseFloat(RegExp["$1"]);
          if (fIEVersion == 5) {
            IeVersion = "IE5";
            alert("暂不支持该版本IE，请升级到IE9以上");
            return;
          }
          else if (fIEVersion == 6) {
            IeVersion = "IE6";
            alert("暂不支持该版本IE，请升级到IE9以上");
            return;
          }
          else if (fIEVersion == 7) {
            IeVersion = "IE7";
            alert("暂不支持该版本IE，请升级到IE9以上");
            return;
          }
          else if (fIEVersion == 8) {
            IeVersion = "IE8";
            alert("暂不支持该版本IE，请升级到IE9以上");
            return;
          }
          else if (fIEVersion == 9){
            IeVersion = "IE9";
            IeNoSupportFlag = true;
          }
          else if (fIEVersion == 10){
            IeVersion = "IE10";
            IeNoSupportFlag = true;
          }
          else if (fIEVersion == 11){
            IeVersion = "IE11";
            IeNoSupportFlag = true;
          }
          return IeVersion;
        }
      },