在前端开发中，我们经常遇到上传文件的需求，以前都是用到时再找资料，但总是感觉对这块不熟，最近翻资料学习了一下，记录一下。
本文中涉及的知识点有：FileList对象，Blob对象，File对象，URL对象、FormData对象等。
本文参考 网道 ，总结而来。另外，强烈推荐网道，可以去 网道的官方 看看，是阮一峰大神发起的项目，提供互联网开发文档，文档非常全面易懂。
FileList对象，是一个像数组的对象，拥有length属性和item()方法，同时，它的每一项都是File对象。
input 标签，将type设为file，之后得到的files属性就是一个FileList对象。
blob 对象表示1个二进制文件的数据内容。blob对象和arraybuffer区别是，blob对象用于 *** 作二进制文件，arraybuffer用于 *** 作内存。
blob 对象拥有2个属性和1个方法，分别是size(单位是字节)、type属性和slice()方法。
File 对象是一种特殊的Blob 对象。它在继承了size、type属性外，还同时有name、lastModified、lastModifiedDate等几个属性。
FileList 对象中的每一项都是File 对象。
拿到File 对象之后就要进行 *** 作，下面是 *** 作。
URLcreateObjectURL(file) 允许为File 对象创建一个临时链接，
FileReader 对象的属性和方法比较多，属性中比较重要的是result，方法中比较重要的是
FileReader 对象的所有属性和方法可以参考 这里 ,这里就不再列出来了。
在早期的互联网时候，提交数据都是用表单。表单提交数据有些缺陷，例如无法校验表单数据，会刷新整个页面等。随着Ajax的兴起，页面表单提交数据慢慢退出历史舞台，但有时上传文件时我们偶尔会用到表单提交数据。
在调用构造函数new FormData(form)构造formdata对象时需要传入form节点，如果不传入，则默认构建空表单。如果传入，则按照key=value的时候构建表单。
可以看看效果图
FormData 对象主要的方法有：
cavas压缩其实很简单，无非就是几个步骤：
1、选择，判断是否大于2M（用File对象的size进行判断，size的单位是字节）；
2、用FileReader对象读取文件成base64,
3、然后创建Image对象，赋值src属性，在Image对象加载完成的回调里创建cavas并绘制(根据是否大于2M动态调整画布大小)；
4、将cavas转成blob，拼在formdata中用ajax上传。
这篇文章到这里也就结束了，这篇文章包含了一些浏览器中提供的对象，可以看到都是很简单的内容。
var filePath=documentgetElementById("上传控件id")value;
var fileType=filePathsubstr(filePathlastIndexOf("\"))toLowerCase();
fileType这个是获取上传文件类型，大小，可以直接获取这个对象，获取fileSize属性除去1024就是大小
1
第一步：新建HTML文件
使用dreamweaver CS6新建一个html文件并保存到桌面，在桌面放一个文件（或文本文档），上传测试用。如图：
步骤阅读
2
第二步：写入html页面代码文件
在dreamweaver中输入以下页面代码：
<table width="958">
<tr >
<td><pre style="height:2px"> <a href=">
</tr>
</table>
<h1> <a href=">
<p> </p>
<div style="width:180px; height:950px; float:left; border: #55AAFF 1px solid">
<p>文件上传 </p>
<br />
<p>上传</p>
<form action="doUploadjsp" method="post" name="form1" enctype="multipart/form-data">
<!-- 类型enctype用multipart/form-data，这样可以把文件中的数据作为流式数据上传，不管是什么文件类型，均可上传。-->
<input type="file" name="upfile" size="15">
<input type="submit" value="确定">
</form></div>
注意，这段代码请放在<body>标签之类。如图：
3
第三步：写入css样式代码
在<head>标签之类输入以下样式代码：
<style type="text/css">
<!--
STYLE1 {color: #3399FF}
STYLE7 { font-size: 16px;
font-weight: bold;
}
STYLE9 {font-family: "华文彩云";
font-size: 48px;
color: #FF0000;
}
STYLE11 {
font-size: 16px;
color: #FF3300;
}
-->
</style>
用以固定页面样式。如图：
4
第四步：检测页面样式
用浏览器打开html文件，查看页面样式，然后做修改调整。如图：
5
第五步：选择文件
点击页面左边的选择文件按钮，选中桌面文件，然后点击打开，在页面上会显示文件名称，如图：
6
第六步：上传文件
点击确定按钮，即可将文件上传到本地磁盘，上传成功后自动跳转到根目录。如图：
你这问题不好理解啊！
我猜你是这意思不知道对不对
就是一个页面地址有个“？”号 你要取这问好后面的值
如果是这样的话 可以这样做
var url= documentURL; ///也可以是windowlocationhref等
var s = urlindexOf("");
if(s!=-1){ var id = urlsubstring(s+1);}
id就是？号后面的值
下面是我的博客
以上就是关于js文件上传中遇到的知识点全部的内容，包括:js文件上传中遇到的知识点、怎么用js限制上传的视频的大小和格式，坐等大神，求具体代码、如何从js文件上传问题，怎么解决等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）