最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
JavaScript html5利用FileReader实现上传功能
时间:2017-05-15 编辑:简简单单 来源:一聚教程网
1. Html部分
代码如下 | 复制代码 |
文件上传演练
|
2. JS部分
代码如下 | 复制代码 |
varresult = document.getElementById("result"); varinput = document.getElementById("file_input"); varinResult = document.getElementById('inResult');
if(typeofFileReader ==='undefined'){ result.innerHTML ="抱歉,你的浏览器不支持 FileReader"; input.setAttribute('disabled','disabled'); }else{ input.addEventListener('change',readFile,false); } functiononFile(){ document.getElementById('file_input').click();//打开 }
functionreadFile(){ varfile =this.files[0]; varfsize = parseInt((file.size)/1024);//计算图片大小,默认是B,转换成KB if(!/image\/\w+/.test(file.type)){ alert("请确保文件为图像类型"); returnfalse; } varreader =newFileReader(); reader.readAsDataURL(file);
reader.onload =function(e){ //alert(this.result); vararr = input.value.split('\\');//分割图片路径 document.getElementById('result').style.display="block"; document.getElementById('txtImgSrc').value = arr[arr.length-1];//取数组最后部分 - 图片名字.jpg document.getElementById('imgInfo').innerHTML = arr[arr.length-1]+"
} } |
3.图片测试
相关文章
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31
- html使用表单标签实现注册页面代码展示 10-31
- 使用HTML截图并保存为本地图片的代码展示 10-31