您的位置：首页 > Web前端 > JavaScript

使用JavaScript 操作HTML5 File文件相关

2018-01-14 11:56 357 查看
一、显示用户选择【图片】实现code如下

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript显示用户选取的图片</title>
</head>
<body>
<div>
<input type="file" name="picture" onchange="selectPicture(this)"
accept="image/gif,image/jpeg,image/jpg,image/png" />
<img src="" width="240px" id="image"/>
</div>
<script type="text/javascript">
function selectPicture(evt){
if (!evt.files || !evt.files[0]) {
return;
}
console.log(evt.files);
var fileName = evt.files[0].name,  //文件名,该属性只读
fileSize = evt.files[0].size,  //文件大小,单位为字节，该属性只读;(1KB = 1024Bytes; 1MB = 1024KB)
fileType = evt.files[0].type; //文件类型 文件的MIME类型，如果分辨不出类型，则为空字符串，该属性只读。
console.log("文件总的大小"+fileSize);
//FileReader包含了一套完整的事件模型，用来捕获读取文件时的状态：
var reader = new FileReader();
//onerror 文件读取出错
reader.onerror = function(){
console.log("文件读取出错...");
}
//文件读取中
reader.onprogress = function(evt){
console.log(evt);
console.log(evt.loaded); //当前文件读取进度
console.log("文件读取中...");
if(evt.lengthComputable){
//当前上传进度
console.log(Math.round((evt.loaded/fileSize)*100)+"%");
}
}
//文件读取成功完成时触发
reader.onload = function (evt) {
document.getElementById('image').src = evt.target.result;
}
//将文件读取为DataURL  返回一个基于Base64编码的data-uri对象
reader.readAsDataURL(evt.files[0]);
}
</script>
</body>
</html>


上述打印 evt.files日志log信息


try {
response.setContentType("application/octet-stream");
response.setHeader("Content-disposition", "attachment;"); //设置下载文件名
response.setHeader("Content-Length", String.valueOf(fileLength));
bos = new BufferedOutputStream(response.getOutputStream());
byte[] buff = new byte[2048];
int bytesRead;
while (-1 != (bytesRead = bis.read(buff, 0, buff.length))) {
bos.write(buff, 0, bytesRead);
}
} catch (IOException e) {
e.printStackTrace();
}


View Code
资料参考
https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
　　 https://developer.mozilla.org/zh-CN/docs/Web/API/File/Using_files_from_web_applications# http://javascript.ruanyifeng.com/htmlapi/file.html
　　　https://segmentfault.com/a/1190000005863250
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航