js如何上传文件

JavaScript019

js如何上传文件,第1张

js采用File API 来上传文件的。

File API 由一组 JavaScript 对象以及事件构成。赋予开发人员操作在 <input type=”file” … />文件选择控件中选定文件的能力。图 1 展示了 File API 所有的 JavaScript 的组合关系。

File API 简单示例

<body>

<h1>File API Demo</h1>

<p>

<!-- 用于文件上传的表单元素 -->

<form name="demoForm" id="demoForm" method="post" enctype="multipart/form-data"

action="javascript: uploadAndSubmit()">

<p>Upload File: <input type="file" name="file" /></p>

<p><input type="submit" value="Submit" /></p>

</form>

<div>Progessing (in Bytes): <span id="bytesRead">

</span>/ <span id="bytesTotal"></span>

</div>

</p>

</body>

运行效果：

HTML5 file组件的新属性

accept : 如果在file组件中增加这个属性就可以直接控制上传的文件类型了，实在是很方便。

multiple：是否允许选择多个文件

HTML5 页面代码修改后

<img width="400" height="250"/><br />

<input type="file" id="pic" name="pic" onchange="printFileInfo()" accept="image/*" multiple="multiple"/>

<input type="button" value="上传图片" onclick="uploadFile()" /><br />

<div id="parent">

<div id="son"></div>

</div>

accept 的值可以参阅：IANA MIME 类型（标准 MIME 类型的完整列表），如果使用的是DW开发的话，软件本身就有提示。

如果选择了多个文件，可以用JS做循环打印，看看文件的名称，类型和大小,看演示代码

function printFileInfo(){

var picFile = document.getElementById("pic")

var files = picFile.files

for(var i=0i<files.lengthi++){

var file = files[i]

var div = document.createElement("div")

div.innerHTML = "第("+ (i+1) +") 个文件的名字："+ file.name +

" , 文件类型："+ file.type +" , 文件大小:"+ file.size

document.body.appendChild( div)

}

}

既然可以循环多文件的话，就可以尝试多文件上传了。

1、首先创建 XMLHttpRequest 对象

//这是全局变量。因为是示例，所以就没有判断浏览器类型，低版本IE这么写的话会出问题的

var xhr = new XMLHttpRequest()

2、上篇介绍了进度事件(Progress) ， 这次实现 progress 和 error 2个事件

error：在请求发生错误时触发。

对应上传时发生错误导致的上传失败：uploadFailed()

//上传失败

function uploadFailed(evt) {

alert("上传失败")

}

progress：在接收相应期间持续不断触发。

对应上传进度方法：onprogress()

/**

* 侦查附件上传情况 ,这个方法大概0.05-0.1秒执行一次

*/

function onprogress(evt){

var loaded = evt.loaded //已经上传大小情况

var tot = evt.total //附件总大小

var per = Math.floor(100*loaded/tot) //已经上传的百分比

$("#son").html( per +"%" )

$("#son").css("width" , per +"%")

}

最后就是上传方法了，注意上面的html代码中上传用的方法也需要改成这个uploadFile()方法才能正常使用。

//上传文件

function uploadFile() {

//将上传的多个文件放入formData中

var picFileList = $("#pic").get(0).files

var formData = new FormData()

for(var i=0i<picFileList.lengthi++){

formData.append("file" , picFileList[i] )

}

//监听事件

xhr.upload.addEventListener("progress", onprogress, false)

xhr.addEventListener("error", uploadFailed, false)//发送文件和表单自定义参数

xhr.open("POST", "upload")

//记得加入上传数据formData

xhr.send(formData)

}

我再添加一个button。

<input type="button" id="btn"/>

<script type="text/javascript">

document.getElementById("btn").onclick=function(){

if(document.getElementById("fileID").value==""){

alert("请上传附件")

}

}

</script>