HTML中简单实现⽂件的⼀键上传的操作
在html中实现⽂件上传的⽅式为form表单中使⽤input type="file"控件，但是这个控件往往显⽰不是美观，影响页⾯效果，这时候,⼀般就通过⼀键上传的操作，来实现点击⼀个按钮上传⽂件.
原理:
设置⼀个具有file上传⽂件框的form表单，并且设置style表单为不显⽰的，同时呢，要对表单中的input控件进⾏onchange事件监听，当input控件改变的时候，就触发表单提交的操作.设置⼀个上传⽂件的按钮，当点击按钮时候，触发表单中的input空间的click事件，来进⾏⽂件的浏览.这样⼀来，当选择好⽂件后，就⾃动提交了.
因为表单提交的话，就会⾃动刷新当前页⾯，因此采⽤，在页⾯中添加⼀个隐藏的<iframe>控件，并且将file提交的表单form中的target属性指向iframe控件，这样⼀来，就实现了当前页⾯⽆刷新的⼀键上传的操作.
代码为:(注:jq⽂件需要⾃⼰引⼊)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>⽂件⼀键上传</title>
<script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
//当点击"⼀键上传"按钮的时候，触发表单中的浏览⽂件的操作
$("#hehe").click(function() {
$("#uploadfile").click();
})
//当选择好上传⽂件后，执⾏提交表单的操作
$("#uploadfile").change(function() {
alert("上传⽂件");
$("#form1").submit();
})
html frame})
</script>
</head>
<body>
<input type="button" id="hehe" value="上传⽂件"/>
<form id="form1" action="#" method="post" enctype="multipart/form-data" target="myframe">
<input type="file" name="uploadfile" id="uploadfile"/>
</form>
<iframe id="myframe"/>
</body>
</html>
当点击上传⽂件按钮的时候,⾃动弹出选择⽂件的页⾯
在后台页⾯进⾏操作,⽽不是在当前页⾯刷新
实际开发中，往往采⽤的是upload的js插件进⾏⼀件上传的操作;
官⽹:
实际操作js代码⽰例:
$("#button-import").upload({
action: '实际开发中的提交位置',
onSelect: function (self, element) {
this.autoSubmit = false;  //关闭⾃动提交,⽅便后⾯进⾏⽂件类型判断
var filename=this.filename();//设定⽂件名
var flag1= dsWith(".xls");
var flag2= dsWith(".xlsx");
if(flag1||flag2){//判断是否是所需要的⽂件类型，这⾥使⽤的是excel⽂件
this.submit();
}else{
alert("提⽰请选择正确的⽂件");
}
},
onComplete: function (data, self, element) {
alert("提⽰⽂件上传成功");//当上传成功后，提⽰
}
});
就是这么简单，具体就不演⽰了

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。