前提:做兼容ie9的文件上传需要后台共同配合,靠前端自己的力量是不行的
做文件上传, 我几乎把网上能找的文章都看了, 但是在我这 就是行不通, 欸, 就是玩儿, 搞得我很火大, 还好实现了, 下面说说我的实现方式.
首先我用的技术是vue(可以忽略)+ jquery+ jquery.from.js
<script src="js/jquery.js"></script><script>Vue.config.productionTip = falsejQuery.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.datathat.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>
/qq_33172029/article/details/84259545
这是我发给后台的参考博文
