js/CSS

jquery file upload使用过程中遇到的bug总结

插件地址: jquery-file-upload

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

在低版本IE下, 需要引入jquery.iframe-transport.js

1
2
3
4
5
6
7
8
9
10
11
12
13
var 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
10
uploadContainer.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
<div class="upload-wrap">
	上传本地图片
	<input class="file-upload" type="file" name="files[]" data-url="XXX">
</div>


.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范围都可弹出文件选择框.