jquery 文件上传 触发两次_jquery file upload使用过程中遇到的bug总结

bug1: IE8,IE9点击上传无反应, 文件上传不了1

2

3

4

5

6

7

8

9

10

11

12

13var iframe = false;

if($.browser.msie && $.browser.version < 10){

iframe = true;

}

uploadContainer.fileupload({

iframe: iframe,

maxFileSize: 1000000,

acceptFileTypes: /(\.|\/)(jpe?g|png)$/i,

done: function (e, data){

//success 返回

}

});

即低版本IE需要通过iframe上传

bug2: ajax iframe上传, IE8,9中会自动下载后端返回的json

需要后端将返回的头信息Content-Type:application/json;charset=utf-8改成Content-Type:text/html;charset=utf-8

前端调用fileupload需要加上dataType参数为’text’, 防止IE8,9中的返回值是undefined

同时前端需要用JSON.parse来将数据转换成json

1

2

3

4

5

6

7

8

9

10uploadContainer.fileupload({

dataType: 'text'

iframe: iframe,

maxFileSize: 1000000,

acceptFileTypes: /(\.|\/)(jpe?g|png)$/i,

done: function (e, data) {

//success 返回

var result = JSON.parse(data.result);

}

});

自定义上传按钮

通过给自定义按钮添加点击事件, 然后触发文件类型的input(display:none)的点击事件来完成上传, 这是做自定义上传的一般做法

但是由于在IE8下, input[type=”file”]如果是隐藏状态, 那么用上述做法是无法将本地文件上传至服务器, 这可能是IE8出于安全方面的考虑导致的

解决办法: 让input[type=”file”]透明, 并且覆盖在自定义按钮上, 这样用户看到的是我们的自定义按钮, 实际点击的是file

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

上传本地图片

.upload-wrap {

position: relative;

//按钮样式

}

.file-upload {

opacity: 0;

filter: alpha(opacity=0);

position: absolute;

top: 0;

right: 0;

cursor: pointer;

font-size: 70px;

}

需要注意的是, IE8下原生的file是一个输入框和一个浏览按钮, 这样点击范围就只有浏览按钮的区域, 不够友好, 通过添加font-size: 70px来扩大按钮范围, 这样点击整个div范围都可弹出文件选择框.