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)
}
你js代码把文件以base64编码形式展示了出来，是为了让用户上传文件之前能够预览对吧。
文件的IO *** 作需要用后端来实现，如果你只是做web前端开发的话，就没有必要研究这个东西，如果你是后端开发者的话可以尝试一下，相关的资料很多，我写个示例吧，后端用php为例：
html实现：
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>ss</title>
</head>
<body>
<form action="file.php" method="post" enctype="multipart/form-data">
<input type="file" name="upfile">
<input type="submit" value="提交">
</form>
</body>
</html>
php实现（file.php）：
<?php@header('Content-Type:text/htmlcharset=utf-8')
if(!isset($_FILES['upfile'])){
exit('请选择您要上传的文件！')
}
if(!file_exists($_FILES['upfile']['tmp_name'])){
exit('您要上传的文件不存在！')
}
$file_dir=dirname(__FILE__).'/tmp'
if(!is_file($file_dir)){
@mkdir($file_dir,0777,true)
}
$file_ext='.jpg'
if(preg_match('/(\.\w+)$/', $_FILES['upfile']['name'],$ext_tmp)){
$file_ext=$ext_tmp[1]
}
$file_save_path=$file_dir.'/'.uniqid().mt_rand(101,999).$file_ext
@rename($_FILES['upfile']['tmp_name'],$file_save_path)
if(!file_exists($file_save_path)){
exit('文件上传失败！')
}
exit('文件上传成功！')
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）