效果图
原理
IE10及以下版本只能通过用户点击input file文件框上传代码,将文件框透明度设置为0.01即可。
HTML代码
<body>
<span class="sunui-filebox-container">
<div class="sunui-filebox-subcontainer">
<input id="text" type="text" class="content-container" value="未选择文件" readonly>
<div class="sunui-filebox-btn">选择文件</div>
<div class="container-select">
<input id="file" type="file" name="file" class="file-select" title="" multiple="multiple">
</div>
</div>
</span>
</body>
CSS代码
.sunui-filebox-container {
display: inline-block;
background-color: #F0F0F0;
border: 1px solid #80C0F0;
width: 200px;
height: 20px;
font-size: 1em;
overflow: hidden;
}
.sunui-filebox-container .sunui-filebox-subcontainer {
display: block;
position: relative;
top: 0;
left: 0;
width: 200px;
height: 20px;
overflow: hidden;
}
.sunui-filebox-container .content-container {
position: absolute;
top: 0;
left: 4px;
border: 0;
margin: 0;
outline:0 none !important;
width: 117px;
height: 18px;
line-height: 18px;
color: #606060;
background-color: #F0F0F0;
}
.sunui-filebox-container .sunui-filebox-btn {
position: absolute;
top: 0;
right: 0;
border-left: 1px solid #80C0F0;
width: 74px;
height: 20px;
background-color: #30A0FF;
text-align: center;
line-height: 20px;
font-size: 0.96em;
font-family: "Microsoft YaHei", "微软雅黑", serif;
font-weight: normal;
color: #202020;
}
.sunui-filebox-container .container-select {
position: absolute;
right: 0;
top: 0;
width: 74px;
height: 20px;
overflow: hidden;
}
.sunui-filebox-container .file-select {
position: absolute;
top: 0;
right: 0;
height: 1000px;
width: 3000px;
opacity: 0.01;
filter: Alpha(opacity = 1);
font-size: 200em;
cursor: pointer;
}
Javascript代码
window.onload = function () {
document.getElementById('file').onchange = function (ev) {
if(this.files && Object.prototype.toString.call(this.files) === '[object FileList]') {
if(this.files.length === 0) {
document.getElementById('text').value = '未选择文件';
} else if(this.files.length === 1) {
document.getElementById('text').value = this.value;
} else {
document.getElementById('text').value = '已选择' + this.files.length + '个文件';
}
} else {
if(this.value) {
document.getElementById('text').value = this.value;
} else {
document.getElementById('text').value = '未选择文件';
}
}
};
}
封装代码
CSS代码
.sunui-filebox-container {
display: inline-block;
background-color: #F0F0F0;
border: 1px solid #80C0F0;
width: 200px;
height: 16px;
font-size: 1em;
overflow: hidden;
}
.sunui-filebox-container .sunui-filebox-subcontainer {
display: block;
position: relative;
top: 0;
left: 0;
width: 200px;
height: 16px;
overflow: hidden;
}
.sunui-filebox-container .content-container {
position: absolute;
top: 0;
left: 4px;
border: 0;
margin: 0;
outline:0 none !important;
width: 117px;
height: 14px;
line-height: 14px;
color: #606060;
background-color: #F0F0F0;
}
.sunui-filebox-container .sunui-filebox-btn {
position: absolute;
top: 0;
right: 0;
border-left: 1px solid #80C0F0;
width: 74px;
height: 16px;
background-color: #30A0FF;
text-align: center;
line-height: 16px;
font-size: 0.96em;
font-family: "Microsoft YaHei", "微软雅黑", serif;
font-weight: normal;
color: #202020;
}
.sunui-filebox-container .container-select {
position: absolute;
right: 0;
top: 0;
width: 74px;
height: 16px;
overflow: hidden;
}
.sunui-filebox-container .file-select {
position: absolute !important;
top: -1px !important;
right: 0 !important;
height: 1000px !important;
width: 3000px !important;
opacity: 0.01 !important;
filter: Alpha(opacity = 1) !important;
font-size: 200em !important;
outline:0 none !important;
cursor: pointer !important;
}
Javascript代码
(function(window, document) {
var sunArray = [];
if (!window.sunui) {
window.sunui = {};
}
window.sunui.addEventListener = function (dom, event, func) {
if(window.addEventListener) {
dom.addEventListener(event, func, false);
} else if(window.attachEvent) {
dom.attachEvent('on' + event, func);
} else {
dom['on' + event] = func;
}
};
window.sunui.removeEventListener = function (dom, event, func) {
if(window.removeEventListener) {
dom.removeEventListener(event, func, false);
} else if(window.detachEvent) {
dom.detachEvent('on' + event, func);
}
};
window.sunui.guid = function() {
function S4() {
return (((1 + window.Math.random()) * 0x10000)|0).toString(16).substring(1);
}
return (S4() + S4() + '-' + S4() + '-' + S4() + '-' + S4() + '-' + S4() + S4() + S4());
};
window.sunui.trim = function (str) {
if(typeof str !== 'string') {
return str;
}
if(String.prototype.trim) {
return str.trim();
} else {
return str.replace(/(^\s*)|(\s*$)/g, '');
}
};
window.sunui.hasClass = function (ele, cls) {
cls = cls || '';
if (cls.replace(/\s/g, '').length === 0) return false;
return new RegExp(' ' + cls + ' ').test(' ' + ele.className + ' ');
};
window.sunui.addClass = function (ele, cls) {
if (!window.sunui.hasClass(ele, cls)) {
ele.className = (ele.className ? ele.className + ' ' + cls : cls);
}
};
window.sunui.removeClass = function (ele, cls) {
if (window.sunui.hasClass(ele, cls)) {
var newClass = ' ' + ele.className.replace(/[\t\r\n]/g, '') + ' ';
while (newClass.indexOf(' ' + cls + ' ') >= 0) {
newClass = newClass.replace(' ' + cls + ' ', ' ');
}
ele.className = newClass.replace(/^\s+|\s+$/g, '');
}
};
window.sunui.isValidNumber = function (num, flag) {
if(num == null) {
return false;
}
if(flag) {
return typeof num === 'number' && !window.isNaN(num) && window.isFinite(num);
}
var nu = window.parseInt(num, 10);
return !!nu || nu === 0;
};
(function (window, document) {
window.sunui.filebox = function(node, json) {
var fileboxNode = null;
var existNode = null;
if(!node) {
return null;
}
var el = typeof node === 'string' ? document.getElementById(node) : (node.length ? node[0] : node);
if(el && sunArray.length) {
for(var i = 0; i < sunArray.length; i++) {
existNode = sunArray[i];
if(existNode.el === el || (existNode.el.getAttribute('data-sunui-guid') && existNode.el.getAttribute('data-sunui-guid') === el.getAttribute('data-sunui-guid'))) {
return existNode;
}
}
}
if(el && json) {
fileboxNode = new FileboxNode();
fileboxNode.init(el, json);
sunArray.push(fileboxNode);
}
return fileboxNode;
};
function FileboxNode() {
this.el = null;
this.span = null;
this.width = 200;
this.height = 16;
this.btnWidth = 74;
this.btnText = '选择文件';
this.contentText = '未选择任何文件';
this.onChange = null
}
FileboxNode.prototype.init = function(el, settingJson) {
var thisBox = this;
var span = document.createElement('span');
var subContainer = document.createElement('div');
var contentContainer = document.createElement('input');
var btn = document.createElement('div');
var selectContainer = document.createElement('div');
if (settingJson.btnText) {
thisBox.btnText = settingJson.btnText;
}
if (settingJson.contentText) {
thisBox.contentText = settingJson.contentText;
}
window.sunui.addClass(span, 'sunui-filebox-container');
window.sunui.addClass(subContainer, 'sunui-filebox-subcontainer');
contentContainer.type = 'text';
contentContainer.value = thisBox.contentText;
contentContainer.readOnly = true;
window.sunui.addClass(contentContainer, 'content-container');
btn.innerText = thisBox.btnText;
window.sunui.addClass(btn, 'sunui-filebox-btn');
window.sunui.addClass(selectContainer, 'container-select');
if(window.sunui.isValidNumber(settingJson.width)) {
thisBox.width = Math.max(parseInt(settingJson.width, 10), 60);
span.style.width = thisBox.width + 'px';
} else if(el.style.width && el.style.width.indexOf('px') > 0) {
thisBox.width = Math.max(parseInt(el.style.width, 10), 60);
span.style.width = el.style.width;
}
if(window.sunui.isValidNumber(settingJson.height)) {
thisBox.height = Math.max(parseInt(settingJson.height, 10), 16);
span.style.height = thisBox.height + 'px';
} else if(el.style.height && el.style.height.indexOf('px') > 0) {
thisBox.height = Math.max(parseInt(el.style.height, 10), 16);
span.style.height = el.style.height;
}
if(window.sunui.isValidNumber(settingJson.btnWidth)) {
thisBox.btnWidth = Math.min(Math.max(parseInt(settingJson.btnWidth, 10), 60), thisBox.width);
} else {
thisBox.btnWidth = Math.min(Math.max(thisBox.btnWidth, 60), thisBox.width);
}
subContainer.style.width = thisBox.width + 'px';
subContainer.style.height = thisBox.height + 'px';
contentContainer.style.width = Math.max(thisBox.width - thisBox.btnWidth - 9, 0) + 'px';
contentContainer.style.height = contentContainer.style.lineHeight = thisBox.height - 2 + 'px';
btn.style.width = thisBox.btnWidth + 'px';
btn.style.height = btn.style.lineHeight = thisBox.height + 'px';
selectContainer.style.width = thisBox.btnWidth + 'px';
selectContainer.style.height = thisBox.height + 'px';
if(el.style.display) {
span.style.display = el.style.display;
}
if(el.style.cssFloat) {
span.style.cssFloat = el.style.cssFloat
}
if(el.style.styleFloat) {
span.style.styleFloat = el.style.styleFloat
}
span.style.marginTop = el.style.marginTop || '0';
span.style.marginRight = el.style.marginRight || '0';
span.style.marginBottom = el.style.marginBottom || '0';
span.style.marginLeft = el.style.marginLeft || '0';
span.style.position = el.style.position;
span.style.top = el.style.top;
span.style.right = el.style.right;
span.style.bottom = el.style.bottom;
span.style.left = el.style.left;
el.title = '';
el.className = '';
el.removeAttribute('style');
window.sunui.addClass(el, 'file-select');
el.setAttribute('data-sunui-guid', window.sunui.guid());
subContainer.appendChild(contentContainer);
subContainer.appendChild(btn);
subContainer.appendChild(selectContainer);
span.appendChild(subContainer);
el.parentNode.insertBefore(span, el);
selectContainer.appendChild(el);
thisBox.el = el;
thisBox.span = span;
if(typeof settingJson.onChange === 'function') {
thisBox.onChange = settingJson.onChange;
}
window.sunui.addEventListener(el, 'change', function(e) {
if(el.files && Object.prototype.toString.call(el.files) === '[object FileList]') {
if(el.files.length === 0) {
contentContainer.value = thisBox.contentText;
} else if(el.files.length === 1) {
contentContainer.value = el.value;
} else {
contentContainer.value = '已选择' + el.files.length + '个文件';
}
} else {
if(el.value) {
contentContainer.value = el.value;
} else {
contentContainer.value = thisBox.contentText;
}
}
if(typeof thisBox.onChange === 'function') {
thisBox.onChange(thisBox);
}
});
return thisBox;
};
})(window, document);
})(window, document);
用法
<body>
<input id="file" type="file" style="position: absolute;top: 200px;left: 300px;" multiple>
</body>
window.onload = function () {
window.sunui.filebox('file', {
width: 240,
height: 28,
btnWidth: 80,
btnText: '点我',
contentText: '您还没有选择文件',
onChange: function (thisBox) {
}
});
}