html表单文件上传下载(html模板下载)
其实html表单文件上传下载的问题并不复杂，但是又很多的朋友都不太了解html模板下载，因此呢，今天小编就来为大家分享html表单文件上传下载的一些知识，希望可以帮助到大家，下面我们一起来看看这个问题的分析吧！
html中怎么上传文件代码
在HTML标准中，XMLHttpRequest对象被重新定义，被称为“XMLHttpRequest Level 2”，其中包含了以下5个新特性：
1、支持上传、下载字节流，比如文件、blob以及表单数据。
2、增加了上传、下载中的进度事件。
3、跨域请求的支持。
4、允许发送匿名请求（即不发送HTTP的Referer部分）。
5、允许设置请求的超时。
在这篇教程中，我们主要关注第一和第二项特性，尤其是第二项——它能够提供我们想要的上传进度。和之前的方案不同，这个方案并不要求服务器作出特殊的设置，因此大家边看教程就可以边动手试试了。
上面图示的就是我们能够实现的内容：1、显示上传的文件信息，比如文件名、类型、尺寸。
2、一个能够显示真实进度的进度条。
3、上传的速度。
4、剩余时间的估算。
5、已上传的数据量。
6、上传结束后服务器返回的响应。
另外，凭借XMLHttpRequest，我们的上传过程整个都是异步的，因此用户在上传文件的时候，依然可以操作网页当中的其它元素，并不需要专门等待上传的完成。而在上传结束后，我们能够获取服务器发回的响应，因此整个上传过程都显得相当顺理成章。
ajax+html实现文件上传有哪几种方法
这次给大家带来ajax+html实现文件上传有哪几种方法，ajax+html实现文件的注意事项有哪些，下面就是实战案例，一起来看一下。
引语：大家都知道，html中上传文件就一个input，type=file就搞定了。但是，这个标签的样式，实在不值得提点什么，要改动他的样式，恐怕也是较难的。但是其实挺简单，今天就来说说上传文件小技巧吧！
1.怎样自定义样式？
1）、只管按照自己喜欢看到的样式去定义即可，如<a href='javascript:;' class='upload-button'></a>,可以是背景图片效果，可以是文字指示，总之想怎么改怎么改！有了按钮，还需要一个文件名容器，用来存放选择上传文件时的名字，从而不让上传看起来枯涩难懂。
2）、添加真正需要上传的文件控件，并设置属性display:none;如<input type='file' class='hide'/>,这样就有了真正的上传文件的地方了。所以，可以说，上传文件的界面有多漂亮取决你的想象力！
2.怎样触发事件？
这是个重点，触发的点应该是自己写的样式处，而真正起作用的元素却是隐藏的，但是并不影响它的点击效果，只需要给它触发一个点击事件即可，如$('#target-file').trigger('click');
3.多选文件？
多文件上传，只需使用html的一个file的multiple=true即可，当然你也可以选择第三方的上传控件，如swfupload，效果是真心不错的，但是对于不想用的插件的人，就不起作用了。
4.相关插件？
界面美化其实可以使用jqueryui等插件；
要做一些友好的交互的话，都会用到ajax技术，无刷新切换、异步上传、提交，最后，其实ajax的路径也是可以保留的，使用pushState, replaceState实现 pjax.
表单验证：validform.js
异步提交文件: jquery.form.js
友好的弹窗提示：layer.js
5.一点兼容性的问题？
做界面方面的工作，最怕的也是很重要的工作，就是各个浏览器之间的兼容性问题，下面主要列几点供参考：
table宽度的处理方式不一致;
select, input显示高度不一致;
alert弹窗不一致;
...
6.演示代码
<a rel="external nofollow" rel="external nofollow" href="javascript:;" up-type-id="1" class="btn btn-default small-btn switch-upload-method"><span>本地上传</span></a>
<a rel="external nofollow" rel="external nofollow" href="javascript:;" up-type-id="2" class="upload-file-instead btn btn-default small-btn switch-upload-method"><span>打包工具</span></a>
<input type="file" name="apkFiles[]" id="local-upload-real-file" class="upload-file-real hide" response-id="local-upload-container" multiple='true'/>
<input type="file" name="apkToolFiles[]" id="apk-tool-real-file" class="upload-file-real hide" response-id="apk-tool-container-textarea"/>
<script>
$(function(){
var alertTitle='系统提示：';
var submitId='#do-submit';
$('#taskForm').Validform({
btnSubmit: submitId,
tiptype: 1,
ignoreHidden: true,
dragonfly: false,
tipSweep: true,
label:".label",
showAllError: false,
postonce: true,
ajaxPost: true,
datatype:{
},
beforeCheck:function(curform){
},
beforeSubmit:function(curform){
$('.upload-file-real').attr('disabled','disabled');
$(submitId).attr('disabled','disabled');//提交前禁用按钮
ajaxSubmitForm(curform);
$(submitId).removeAttr('disabled');//失败后恢复可提交
return false;
},
submitForm: function(){}//不再起作用
});
//切换上传方法
$('.switch-upload-method').off().on('click', function(){
//$(submitId).attr('disabled','disabled');
var pObj=$(this).parent().find('.switch-upload-method');
var index= pObj.index(this);
var uploadTypeId=$('#upload-type-id').val();//上传方式：1:打包工具;2:本地上传,0:没有上传方式
var uploadType=$(this).attr('up-type-id');
if(parseInt($('#sub-channel-count').html())> 0){
if(uploadTypeId!= uploadType){
layer.alert('还有子渠道包数据，不能完成切换，请先确认清除再切换！');
return false;
}
}
pObj.not(':eq('+ index+')').removeClass('btn-danger').addClass('btn-default');
pObj.eq(index).removeClass('btn-default').addClass('btn-danger');
if(uploadType== 36){//local-upload
$('#upload-type-id').val(uploadType);
$('#init-apk-container').show();
$('#apk-tool-container').hide();
$('#upload-main-control').find('.del-it-main').css({display:'inline-block'});
$('#local-upload-real-file').trigger('click');
}else if(uploadType== 35){//apk-tool
$('#upload-type-id').val(uploadType);
$('#init-apk-container').hide();
$('#local-upload-container').hide();
$('#upload-main-control').find('.del-it-main').hide();
$('#apk-tool-container').show();
}
});
//本地上传
$('#local-upload-real-file').off().on('change', function(){
if(!$(this).val()){
return false;
}
file_size= 0;
filepath=$(this).val();
maxFileSize= 30* 1024* 1024;
var browserCfg={};
var ua= window.navigator.userAgent;
if(ua.indexOf("MSIE")>=1){
browserCfg.ie= true;
}else if(ua.indexOf("Firefox")>=1){
browserCfg.firefox= true;
}else if(ua.indexOf("Chrome")>=1){
browserCfg.chrome= true;
}
if(browserCfg.ie){
var img= new Image();
img.src= filepath;
file_size= img.fileSize;
while(true){
if(img.fileSize> 0){
if(img.fileSize> maxFileSize){
alert("上传包超过30MB限制，请使用打包工具上传！");
return false;
}
break;
}
}
} else{
file_size= this.files[0].size;
if(file_size> maxFileSize){
alert("上传包超过30MB限制，请使用打包工具上传！");
return false;
}
}
var responseObjId=$(this).attr('response-id');
var responseObj=$('#'+ responseObjId);
$('#taskForm').ajaxSubmit({
url:'/aa/bb/uploadTmpApk',
resetForm: false,
dataType:'json',
beforeSubmit: function(option){
window.loading= layer.load(2);
},
success: function(data, statusText){
layer.close(window.loading);
if(data.status== 1){
$('#version-identifier').val(data.version);
responseObj.html(data.apkInfoHtml);
responseObj.show();
var delObj=$('#upload-main-control').find('.del-it-main');
delObj.css({'display':'inline-block'});
$('#sub-channel-count').html(data.apkTotal);
$('#init-apk-container').hide();
$(submitId).removeAttr('disabled');
}else{
layer.alert(data.info,{title: alertTitle});
}
},
error: function(data){
layer.close(window.loading);
layer.alert('未知错误，请稍后再试！');
}
});
return false;//防止dialog自动关闭
});
//打包工具
$('#apk-tool-real-file').off().on('change', function(){
if(!$(this).val()){
return false;
}
var responseObjId=$(this).attr('response-id');
var responseObj=$('#'+ responseObjId);
$('#Form').ajaxSubmit({
url:'/aa/bb/uploadTmpApkTool',
resetForm: false,
dataType:'json',
beforeSubmit: function(option){
window.loading= layer.load(2);
},
success: function(data, statusText){
layer.close(window.loading);
if(data.status== 1){
$('#version-identifier').val(data.version);
responseObj.html(data.infoHtml);
var parentContainer= responseObj.parent().parent(),
nameContainer= parentContainer.find('.apk-name-container'),
delObj= parentContainer.find('.del-it-apk-tool');
nameContainer.html(data.apkName);
nameContainer.attr('title', data.apkName);
$('#apk-tool-file-tmp').html(data.fileInfo);
$(submitId).removeAttr('disabled');
}else{
layer.alert(data.info,{title: alertTitle});
}
},
error: function(data){
layer.close(window.loading);
layer.alert('未知错误，请稍后再试！');
}
});
return false;//防止dialog自动关闭
});
$('.apk-tool-upload-button').on('click', function(){
$('#apk-tool-real-file').trigger('click');
});
});
</script>以上，主要就是，使用隐藏的input file标签选择，选择文件之后立即ajax提交，最后，整个表单ajax提交的过程。
合理使用一些css, js,让你的网页更自由！
相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！
推荐阅读：
ajax怎样提交form表单与实现文件上传
Ajax向后台传输json格式数据出现错误应如何处理
html5如何实现文件上传功能
本篇文章将给大家分享一个案例，利用HTML5实现文件上传的功能，有一定的参考价值，希望对大家有所帮助
html5新增的一些API方法使我们实现一些功能更加简便也可以实现更多的动态效果，接下来将详细介绍文件上传功能的实现
案例实现所用到的知识点
（1）multiple是HTML5新增属性主要用于多个值文件的上传，规定了所输入字段可选择多个值，一般与input属性中email和 file共用
（2）querySelector()方法主要用于返回文档中匹配指定选择器的第一个元素，如果要返回所有的元素可用querySelectorAll()方法替代。
（3）FileReader对象允许应用程序异步读取存储在计算机上的文件的内容，使用 File或 Blob对象指定读取的文件或数据。其中File对象可以是来自<input>元素上选择文件后返回的FileList对象
（4）readAsDataURL：将读取出来的图像文件，直接显示在网页上，达到预览效果
代码展示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文件读取</title>
<style>
.box{
width:500px;
height:500px;
border: 1px solid#ccc;
margin:300px auto;
position: relative;
background-color:rgb(167,239,251);
}
.file{
position: absolute;
bottom:0;
left:0;
}
#img{
position: absolute;
left:100px;
bottom:30px;
}
</style>
</head>
<body>
<div>
<input type="file" multiple>
<img src="" alt="" id="img">
</div>
<script>
var file= document.querySelector('.file');/*获取到了文件表单元素*/
/*选择文件后触发*/
file.onchange= function(){
/*初始化了一个文件读取对象*/
var reader= new FileReader();
/*读取文件数据 this.files[0]文件表单元素选择的第一个文件*/
reader.readAsDataURL(this.files[0]);
/*加载*/
reader.onload= function(){
/*读取完成显示图片*/
console.log(this.result);
document.querySelector('#img').src= this.result;
}
}
</script>
</body>
</html>效果显示
未选中前
选中后
关于本次html表单文件上传下载和html模板下载的问题分享到这里就结束了，如果解决了您的问题，我们非常高兴。