ie9 ajax 上传图片,VUE项目中文件上传兼容IE9

项目使用VUE编写，UI是ElementUI，但是Element的Upload组件是不兼容IE9的。因为IE9中无法使用FormData。

查找资料基本有两种解决方法：1.引入JQuery和jQuery.form。2.使用vue-upload-component

1、jQuery.form

插件提供ajaxSubmit和ajaxForm两种表单提交方式，注意：不要对同一个表单同时使用两种方式。

ajaxSubmit是jQuery表单插件核心函数。非常灵活，因为它依赖于事件机制，只要有事件触发就能使用ajaxSubmit()提交表单，eg：超链接、图片、按钮的click事件。

ajaxForm是对$(“any”).ajaxSubmit(options)函数的一个封装，适用于表单提交的方式(注意，主体对象是

)，会帮你管理表单的submit和提交元素([type=submit],[type=image])的click事件。在出发表单的submit事件时：阻止submit()事件的默认行为(同步提交的行为)并且调用$(this).ajaxSubmit(options)函数。

$('#myForm').ajaxForm(function() {

$('#output1').html("提交成功！");

});

$('#myForm2').submit(function() {

$(this).ajaxSubmit(function() {

$('#output2').html("提交成功！");

});

return false; //阻止表单默认提交

});

var options = {

target: '#output', //把服务器返回的内容放入id为output的元素中

beforeSubmit: validate, //提交前的回调函数

success: showResponse, //提交后的回调函数

//url: url, //默认是form的action， 如果申明，则会覆盖

//type: type, //默认是form的method(get or post)，如果申明，则会覆盖

//dataType: null, //html(默认), xml, script, json...接受服务端返回的类型

//clearForm: true, //成功提交后，清除所有表单元素的值

//resetForm: true, //成功提交后，重置所有表单元素的值

timeout: 3000 //限制请求的时间，当请求大于3秒后，跳出请求

}

function validate(formData, jqForm, options) { //在这里对表单进行验证，如果不符合规则，将返回false来阻止表单提交，直到符合规则为止

//方式一：利用formData参数

for (var i=0; i < formData.length; i++) {

if (!formData[i].value) {

alert('用户名,地址和自我介绍都不能为空!');

return false;

}

}

//方式二：利用jqForm对象

var form = jqForm[0]; //把表单转化为dom对象

if (!form.name.value || !form.address.value) {

alert('用户名和地址不能为空，自我介绍可以为空！');

return false;

}

}

function showResponse(responseText, statusText){

//dataType=xml

var name = $('name', responseXML).text();

var address = $('address', responseXML).text();

$("#xmlout").html(name + " " + address);

//dataType=json

$("#jsonout").html(data.name + " " + data.address);

};

2、vue-upload-component

安装：

npm install vue-upload-component --save

使用：

设置this.$refs.upload.active = true，触发上传。

@input-filter是上传前的钩子函数，用于判断是否符合要求

@input-file是上传回调函数,每次上传的状态变化时 都会调用@input-file绑定的回调，形参是newFile, oldFile，通过新旧文件的对比来得到当前的状态

data:附加请求的参数

extensions:允许上传文件的后缀("jpg,gif,png,webp")

headers:自定义请求headers

• {{file.name}}

  移除

>Upload file

import 'vue-upload-component/dist/vue-upload-component.part.css'

import FileUpload from 'vue-upload-component'

export default {

components: {

FileUpload,

},

data() {

return {

files: []

}

},methods: {

remove(file) {

this.$refs.upload.remove(file)//会触发inputFile中删除条件

}

/**

* Has changed

* @param Object|undefined newFile 只读

* @param Object|undefined oldFile 只读

* @return undefined

*/

inputFile: function (newFile, oldFile) {

if (newFile && !oldFile) {

// 添加文件

}

if (newFile && oldFile) {

// 更新文件

// 开始上传

if (newFile.active !== oldFile.active) {

console.log('Start upload', newFile.active, newFile)

// 限定最小字节

if (newFile.size >= 0 && newFile.size < 100 * 1024) {

newFile = this.$refs.upload.update(newFile, {error: 'size'})

}

}

// 上传进度

if (newFile.progress !== oldFile.progress) {

console.log('progress', newFile.progress, newFile)

}

// 上传错误

if (newFile.error !== oldFile.error) {

console.log('error', newFile.error, newFile)

}

// 上传成功

if (newFile.success !== oldFile.success) {

console.log('success', newFile.success, newFile)

}

}

if (!newFile && oldFile) {

// 删除文件

// 自动删除 服务器上的文件

if (oldFile.success && oldFile.response.id) {

// $.ajax({

// type: 'DELETE',

// url: '/file/delete?id=' + oldFile.response.id,

// });

}

}

// 自动上传

if (Boolean(newFile) !== Boolean(oldFile) || oldFile.error !== newFile.error) {

if (!this.$refs.uploader.active) {

this.$refs.uploader.active = true

}

}

},

/**

* Pretreatment

* @param Object|undefined newFile 读写

* @param Object|undefined oldFile 只读

* @param Function prevent 阻止回调

* @return undefined

*/

inputFilter: function (newFile, oldFile, prevent) {

if (newFile && !oldFile) {

// 过滤不是图片后缀的文件

if (!/\.(jpeg|jpe|jpg|gif|png|webp)$/i.test(newFile.name)) {

return prevent()

}

}

// 创建 blob 字段 用于图片预览

newFile.blob = ''

let URL = window.URL || window.webkitURL

if (URL && URL.createObjectURL) {

newFile.blob = URL.createObjectURL(newFile.file)

}

} }

}

注意：文件上传之后的返回值 Content-Type值不能是application/json 这会导致IE去解析返回结果，最终调用文件的保存或者打开，此处需要与后端协商将Content-Type改为text/plain

js 无刷新文件上传 &lpar;兼容IE9 &rpar;

之前项目中有个文件上传了需求,于是直接就使用了FormData对象异步上传,但是在测试得时候发现ie9无法正常上传(项目要求兼容IE9+),无奈,查资料得知IE9- 版本不支持formdata对象得异 ...

vue项目 多文件上传并显示在页面上

ASP&period;NET：MVC中文件上传与地址变化处理

目录 文件的上传和路径处理必须解决下面列出的实际问题: 1.重复文件处理 2.单独文件上传 3.编辑器中文件上传 4.处理文章中的图片路径 5.处理上传地址的变化 一.上传文件和重复文件处理 文件处理 ...

vue&plus;axios&plus;elementUI文件上传与下载

vue+axios+elementUI文件上传与下载 Simple_Learn 关注  0.5 2018.05.30 10:20 字数 209 阅读 15111评论 4喜欢 6 1.文件上传 这里主要 ...

jsp&bsol;struts1&period;2&bsol;struts2 中文件上传(转)

jsp\struts1.2\struts2 中文件上传 a.在jsp中简单利用Commons-fileupload组件实现 b.在struts1.2中实现c.在sturts2中实现现在把Code与大家 ...

随机推荐

Urlencode and Urldecode 命令行

由于经常使用,简单记录之 $ alias urlencode='python -c "import sys, urllib as ul; print ul.quote_plus(sys.ar ...

EXTJS 4&period;2 资料 控件之checkboxgroup的用法(静态数据)

1.页面 1.1点击‘横幅’,需要动态显示隐藏文本框 { xtype: 'fieldset', title: '指定附加图&横幅设置', collapsible: true, items: [ ...

asp&period;net上传Excel文件到服务端进行读取

1.我们IIS是使用7.5,由于在网站中上传Excel文件到服务端进行数据读取时候出现读取失败情况.一开始以为是没有按照office软件问题,其实不然,因为server是64位操作系统,如果我们要使用 ...

awk用法举例

awk文本分割输出工具(按列输出工具) awk [options] ' PATTERN { action } ' file1, file2, ... 内置变量: FS:field separator, ...

修改MySQL引擎

1. 显示MySQL支持的引擎:show engines;

&lbrack;ACM&rsqb; n划分数m部分，它要求每一个部分，并采取了最大的产品&lpar;间隔DP)

A - 爱管闲事 春希很爱管闲事,他每天都会抽出时间帮助一些同学,因为春希很死板,出于公平性,春希不会先帮助后来找他的同学. 如今有n个同学须要他的帮助,尽管他非常想一天之类帮助全部人,但毕竟精力有限 ...

JS 语言核心(JavaScript权威指南第六版)(阅读笔记)

前言: 对于程序员,学习是无止境的,知识淘换非常快,能够快速稳固掌握一门新技术,是一个程序员应该具备的素质.这里将分享本人一点点不成熟的心得. 了解一门语言,了解它的概念非常重要,但是一些优秀的设计思 ...

Python动态展现之一

首先: def f(): print('first') def g(): f() g() def f(): print('second') g() 结果: >>> first sec ...