最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
JS实现浏览上传文件的代码
时间:2017-08-24 编辑:猪哥 来源:一聚教程网
"position:relative;"
>
'text'
name=
'textfield'
id=
'textfield'
style=
" border:2px solid #cdcdcd; border-radius:50px;"
/>
'button'
value=
'浏览...'
style=
"display: inline-block;
margin-bottom: 0;
font-size: 14px;
border-radius: 4px;
padding: 6px 12px;
margin: 2px 2px;
border: 1px solid #357ebd;
background: #1b9ad5;
color: #fff;"
/>
"file"
name=
"file1"
accept=
"image/jpeg, image/gif"
id=
"file1"
onchange=
"document.getElementById('textfield').value=this.value"
style=
"position:absolute; top:5px; right:74px; filter:alpha(opacity:0);opacity: 0;"
/>
"button"
name=
"button"
onclick=
"mysubmit()"
value=
"上传"
style=
"display: inline-block;
margin-bottom: 0;
font-size: 14px;
border-radius: 4px;
padding: 6px 12px;
margin: 2px 2px;
border: 1px solid #357ebd;
background: #1b9ad5;
color: #fff;"
>
"display:none;color:#6D6D72;font-size: 20px;"
id=
"res"
>
function
mysubmit() {
var
a = document.getElementById(
"textfield"
).value;
if
(a ==
""
) {
alert(
"请上传文件"
);
return
;
}
document.form1.submit();
ajaxsend();
}
function
ajaxsend() {
var
xmlHttp;
if
(window.ActiveXObject) {
xmlHttp =
new
ActiveXObject(
"Msxml2.XMLHTTP"
);
}
else
{
xmlHttp =
new
XMLHttpRequest();
}
xmlHttp.open(
"post"
,
"upload"
,
true
);
xmlHttp.onreadystatechange =
function
() {
xmlHttp.readyState;
if
(xmlHttp.readyState == 4) {
res.innerHTML =
"上传成功!"
;
setTimeout(
function
() {
res.innerHTML =
""
;
}, 2000);
}
else
{
document.getElementById(
"res"
).style.display =
"inline"
;
}
}
xmlHttp.send();
var
obj = document.getElementById(
'textfield'
);
obj.outerHTML = obj.outerHTML;
}
相关文章
- js实现音乐播放器代码展示 10-12
- js实现图片查看器代码展示 10-12
- JS中switch的四种写法介绍 10-12
- js实现新闻轮播效果教程 10-11
- JS实现简单的图片切换功能教程 10-11
- js实现下拉刷新和上拉加载解析 09-28