兼容IE9的文件上传

前提:做兼容ie9的文件上传需要后台共同配合,靠前端自己的力量是不行的

做文件上传, 我几乎把网上能找的文章都看了, 但是在我这 就是行不通, 欸, 就是玩儿, 搞得我很火大, 还好实现了, 下面说说我的实现方式.

首先我用的技术是vue(可以忽略)+ jquery+ jquery.from.js

<script src="js/jquery.js"></script>
<script>
        Vue.config.productionTip = false
        jQuery.support.cors = true;
</script>
<script src="js/jquery.form.min.js"></script>
           

 这是所需文件,我用的是jquery1.8.3+jquery.form.min3.51.0 ,找不到资源的可以到我博客直接下载(无需积分)(要积分的真的无语)

<form id="ajaxForm" method="post" action="" enctype="multipart/form-data">
  <input type="file" name="file" value="浏览文件" @change="onchange" class="sc-input" />
  <button type="submit" id="btnSubmit" style="padding: 0px 20px; border-radius: 3px; border: 1px solid #51cacd; border-image: none; height: 30px; color: white; line-height: 5px !important; font-size: 13px; margin-top: 6px; background-color: #51cacd;">上传文件</button>
</form>
           

onchange: function (data) {
            var that = $(this)[0]
            var form = document.forms[0]
            var ts = ""
            ts = Date.now()
            var options = {
                url: window.ip + 'xxx?ts=' + ts,
                type: "post", //默认是form的method（get or post），如果申明，则会覆盖
                // beforeSubmit: beforeCheck, //提交前的回调函数
                // target: "#output", //把服务器返回的内容放入id为output的元素中
                // dataType: "html", //html(默认), xml, script, json...接受服务端返回的类型
                // clearForm: true, //成功提交后，是否清除所有表单元素的值
                // resetForm: true, //成功提交后，是否重置所有表单元素的值
                // timeout: 3000, //限制请求的时间，当请求大于3秒后，跳出请求
                success: function (e) {
                    getAjax('xxx', {
                        ts: ts
                    }, function (response) {
                        if (ts == "") {
                            that.$message({
                                message: '未知',
                                type: 'info'
                            });

                        } else {
                            if (response.data == "") {
                                that.$message({
                                    message: '上传失败',
                                    type: 'error'
                                });
                                ts = ""
                            } else {
                                that.listData()
                                if (response && response.data) {
                                    response.data.data.map(function (
                                        item, index) {
                                        if (item.code == "200") {
                                            that.dialogTableVisibleError =
                                                false
                                        } else {
                                            that.bigList = response.data
                                                .data
                                            that.dialogTableVisibleError =
                                                true

                                        }
                                    });
                                }
                                that.$message({
                                    message: '上传成功',
                                    type: 'success'
                                });
                                ts = ""
                                form.reset()
                            }
                        }
                    })
                },
                error: function (e) {

                }
            }
            // $(function () {
            $('#ajaxForm').ajaxForm(options).submit(function () {
                // alert("提交成功1");
                return false;
            });
            // });

            // form.reset() // 提交完进行重置form表单
        }
           

以上就是代码段

<el-dialog title="错误" :visible.sync="dialogTableVisibleError"
                                :header-cell-style="{background:'#cecece'}">
                                <el-table :header-cell-style="{background:'#cecece'}" :data="bigList"
                                    style="width: 100%">
                                    <el-table-column prop="msg" label="错误信息" show-overflow-tooltip align="center">
                                    </el-table-column>
                                    <el-table-column prop="code" label="错误码" show-overflow-tooltip align="center">
                                    </el-table-column>
                                </el-table>
                            </el-dialog>
           

https://blog.csdn.net/qq_33172029/article/details/84259545

这是我发给后台的参考博文