HTML上传文件的多种方式
1. 传统方式
<form id="upload-form" action="upload.php" method="post" enctype="multipart/form-data" ><input type="file" id="upload" name="upload" /> <br /><input type="submit" value="Upload" />
</form>
2. iframe上传
用户点击submit
的时候,动态插入一个iframe
var form = $("#upload-form");
form.on('submit',function() {// 此处动态插入iframe元素
});
动态插入iframe
代码
var seed = Math.floor(Math.random() * 1000);
var id = "uploader-frame-" + seed;
var callback = "uploader-cb-" + seed;var iframe = $('<iframe id="'+id+'" name="'+id+'" style="display:none;">');
var url = form.attr('action');
form.attr('target', id).append(iframe).attr('action', url + '?iframe=' + callback);
最后一行,它为表单添加target
属性。指向动态插入的iframe
。这样上传结束后服务器将结果返回iframe
窗口。所以当前页面不会跳转。其次,在它的action
属性指定的上传网址的后面添加一个参数,使得服务器知道回调函数的名称。这样就能将服务器返回的信息,从iframe
窗口传到上层页面。
服务器返回的信息应该如下:
<script type="text/javascript">window.top.window['callback'](data);
</script>
小笔记
if (window.top!=window.self) //判断是否是顶层窗口
然后在当前网页中定义回调函数
window[callback] = function(data){console.log('received callback:', data);iframe.remove(); //removing iframeform.removeAttr('target');form.attr('action', url);window[callback] = undefined; //removing callback
};
3. 初步使用FormData(ajax上传)
ajax上传文件,放在表单的submit
事件的回调函数中。
form.on('submit',function() {// 此处进行ajax上传
});
进行ajax上传
// 检查是否支持FormData
if(window.FormData) { var formData = new FormData();// 建立一个upload表单项,值为上传的文件formData.append('upload', document.getElementById('upload').files[0]);var xhr = new XMLHttpRequest();xhr.open('POST', $(this).attr('action'));// 定义上传完成后的回调函数xhr.onload = function () {if (xhr.status === 200) {console.log('上传成功');} else {console.log('出错了');}};xhr.send(formData);
}
为ajax上传文件添加进度条
- 预先在
html
中添加progress
元素<progress id="uploadprogress" min="0" max="100" value="0">0</progress>
- 定义
progress
的回调函数xhr.upload.onprogress = function (event) {if (event.lengthComputable) {var complete = (event.loaded / event.total * 100 | 0);var progress = document.getElementById('uploadprogress');progress.value = progress.innerHTML = complete;} };
4. 图片预览
// 检查是否支持FileReader对象
if (typeof FileReader != 'undefined') {var acceptedTypes = {'image/png': true,'image/jpeg': true,'image/gif': true};if (acceptedTypes[document.getElementById('upload').files[0].type] === true) {var reader = new FileReader();reader.onload = function (event) {var image = new Image();image.src = event.target.result;image.width = 100;document.body.appendChild(image);};reader.readAsDataURL(document.getElementById('upload').files[0]);}
}
5. 拖拽上传
先在页面中放置一个容器,用来接收拖放的文件
<div id="holder"></div>
对它设置样式:
#holder {border: 10px dashed #ccc;width: 300px;min-height: 300px;margin: 20px auto;
}#holder.hover {border: 10px dashed #0c0;
}
拖放文件的代码,主要是定义dragover
、dragend
和drop
这三个事件。
// 检查浏览器是否支持拖放上传。
if('draggable' in document.createElement('span')){var holder = document.getElementById('holder');holder.ondragover = function () { this.className = 'hover'; return false; };holder.ondragend = function () { this.className = ''; return false; };holder.ondrop = function (event) {event.preventDefault();this.className = '';var files = event.dataTransfer.files;// do something with files};
}
6. 在rails中获取上传
file_io = params[:upload]
#可以获取临时文件
file_io.tempfile
7. XMLHttpRequest新版本
**首先新建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();
然后想服务器发送一个HTTP请求
xhr.open('GET', 'example.com');
xhr.send();
接着等待服务器回应,还需要监控XMLHttpRequest对象状态的变化
xhr.onreadystatechange = function() {if(xhr.readyState == 4 && xhr.status == 200) {alert(xhr.responseText);}else{alert(xhr.statusText);}
}
XMLHttpRequest对象的主要属性
- xhr.readyState:XMLHttpRequest对象的状态,等于4表示数据已经接收完毕。
- xhr.status:服务器返回的状态码,等于200表示一切正常。
- xhr.responseText:服务器返回的文本数据
- xhr.responseXML:服务器返回的XML格式的数据
- xhr.statusText:服务器返回的状态文本。
新版本XMLHttpRequest的新功能
- 可以设置HTTP请求的时限。
- 可以使用FormData对象管理表单数据。
- 可以上传文件。
- 可以请求不同域名下的数据(跨域请求)。
- 可以获取服务器端的二进制数据。
- 可以获得数据传输的进度信息。
- 请求时限设置
xhr.timeout = 200;
设置事件
xhr.ontimeout = function(event){alert('请求超时!'); }
- formData对象
首先新建一个formData对象var formData = new FormData();
为FormData对象添加表单项
formData.append('username','张三'); formData.append('id', '1234');
传送FormData对象
xhr.send(formData);
FormData可以获取变单项
var form = document.getElementById('myform'); var formData = new FormData(form); formData.append('secret', '123456'); // 添加一个表单项 xhr.open('POST', form.action); xhr.send(formData);
转载于:https://www.cnblogs.com/hekai123/p/7456577.html
HTML上传文件的多种方式相关推荐
- jquery ajax java上传文件_jQuery Ajax方式上传文件的方法
jQuery Ajax方式上传文件用到两个对象 第一个对象:FormData 第二个对象:XMLHttpRequest 目前新版的Firefox 与 Chrome 等支持HTML5的浏览器完美的支持这 ...
- 这是Blazor上传文件的最佳方式吗?
Blazor不得不说真是好东西,极大的提升了开发效率,很多的页面交互功能基本上只需要写很少的代码就能实现了,而且还是无js实现,你也绝对没有想到过,Blazor实现文件上传是有多么简单! 先说结论:B ...
- php上传文件失败解决方式
在apache配置文件中设置php上传临时目录 在服务器上配置webmail(比如我最喜欢的SquirrelMail)时,出于服务器安全考虑,一般在apache配置文件中作 php_admin_val ...
- ASP.Net Core创建MVC项目上传文件(缓冲方式)
学习了普通webapp中上传文件,再看看从MVC项目中通过缓冲方式上传文件到物理文件夹.这两者的区别主要是webapp通过模型绑定的方式传递IFormFile对象,而mvc通过控制器和action ...
- .Net框架集WebClient类向WinCE平台上传文件(FTP方式)延迟15秒释疑
年前在做嵌入式组态时,有一个组态下载功能,该功能就是采用FTP上传功能把组态配置文件上传到触摸屏(WinCE4.2平台,已开FTP服务器)中的.所用到的指令就是WebClient类的UploadFil ...
- 华为服务器上传文件,服务器上传文件的方式
服务器上传文件的方式 内容精选 换一换 外部镜像文件在从原平台导出前,没有按照"Windows操作系统的镜像文件限制"的要求完成初始化操作,推荐您使用弹性云服务器完成相关配置.流程 ...
- 使用阿里云OSS上传文件
本文介绍如何利用Java API操作阿里云OSS对象存储. 1.控制台操作 首先介绍一下阿里云OSS对象存储的一些基本概念. 1.1 进入对象存储界面 登录阿里云账号,进入对象存储界面,如图所示. 进 ...
- AJAX的post请求与上传文件
之前介绍了AJAX的get的请求方式与跨域请求,除此之外AJAX还可以进行异步的post请求,在使用post方式的请求时需要设置请求头,如下: xhr.setRequestHeader("C ...
- layui上传文件请求接口异常_SpringMVC实现文件上传与下载,拦截器,异常处理
第一章:响应数据和结果视图 1. 返回字符串 Controller方法返回字符串可以指定逻辑视图的名称,根据视图解析器为物理视图的地址. @RequestMapping(value="/he ...
最新文章
- checkIP.sh
- Android的跨进程通信
- 字符编码的前世今生--转
- Android 利用url获取Bitmap图片
- Kubernetes网络方案Flannel的学习笔记
- 消费金融和信用卡本质上的区别是什么?
- linux tomcat 日志乱码,Linux下TOMCAT中日志出现中文乱码
- 从有理数到实数和数的连续体
- 根据函数名称调用函数
- VB.NET LDAP 用户身份验证
- oracle的分支语句,Oracle中的分支语句
- 四个好看的table表格样式
- 提供小图标(Icon)的网站(不定时更新)
- 海康摄像头视频视频转码H264处理
- html5制作颜色的诗句,带有颜色的诗句(精选60句)
- 拼图android系统程序,2021手机照片拼图软件
- 黑龙江省扶贫电商平台“小康龙江”上线 传输绿色优质农产品
- 【图像识别与处理】构建用于垃圾分类的图像分类器
- css3制作吃豆豆动画
- 12个优雅的 python 代码使用案例