大佬教程收集整理的这篇文章主要介绍了【文件上传 前端】文件上传 前端 Part2 —— HTML5 文件指针方式，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
<!DOCTYPE HTML> <html> <head> <Meta content="text/html" charset="utf-8" /> <Meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> <title>upload file2 - h5传文件指针</title> </head> <body> <input type="file" accept="image/*" id="J_upload_btn" /> <div id="J_preview_area"> </div> <script src="jquery-1.9.1.min.js"></script> <script> $('body').on('change','#J_upload_btn',function(){ var source = $(this).get(0),file = source.files[0]; var ireg = /image\/.*/i,file_type = file.type,file_name = file.name; if(!file_type.match(ireg)) { alert('不是图片，请重新选择'); }else{ if(window.FileReader) { var fr = new FileReader(); fr.onloadend = function(E) { var file_data; // 此处不做任何压缩直接读取文件流显示为图片（可扩展为压缩图片后显示） file_data = e.target.result; $('#J_preview_area').html('<img src="'+file_data+'" />'); var url = 'upload_file1.PHP'; var xmlhttp; if (window.XMLhttprequest) { //IE7+,Firefox,Chrome,Opera,Safari xmlhttp = new XMLhttprequest; //针对某些特定版本的mozillar浏览器的bug进行修正 if (xmlhttp.overrideMimeTypE) { xmlhttp.overrideMimeType('text/xml'); }; } else if (window.ActiveXObject){ //IE6,IE5 xmlhttp = new ActiveXObject("Microsoft.XMLhttp"); }; if(xmlhttp.upload){ //2.回调函数 xmlhttp.onreadystatechange = function(E){ if(xmlhttp.readyState == 4){ if(xmlhttp.status == 200){ var json = eval('(' + xmlhttp.responseText + ')'); console.log(json); }else{ console.log(xmlhttp.responseText); } } }; //3.设置连接信息 xmlhttp.open("POST",url,truE); //4.发送数据，开始和服务器进行交互 var formdata = new FormData(); formdata.append("file",filE); xmlhttp.send(formdata); } }; fr.readAsDataURL(filE); } } }); </script> </body> </html>
使用HTML5读取图片显示缩略图，并使用文件指针方式上传有以下几个注意点：
1、此方法需支持HTML5的FileReader（即ie10+）
2、选择图片时，首先需要在input type="file” 加上accept的类型，其次也需要js进行正则校验文件的type（由于accept只是在文件选择器打开时筛选出符合条件的文件供用户选择，用户任然可以切换到所有文件，所以需要加上js的正则过滤，以确保文件类型正确）
3、由于FileReader读取文件流是一个异步的过程，图片预览必须写在FileReader的onloadend函数中，等文件流读取完毕后才能获取到base64之后的图片流，另外由于是用文件指针的方式，所以上传的部分只要选择了图片即可上传，不必一定放在这FileReader的onloadend函数中（例子中只是为了在预览完毕后进行上传，不是必须的行为）
4、这个方法是用http模拟ajax的方法异步上传文件，所以页面不会跳转，但是值得注意的是传统jquery中的ajax是无法上传文件的
以上是大佬教程为你收集整理的【文件上传 前端】文件上传 前端 Part2 —— HTML5 文件指针方式全部内容，希望文章能够帮你解决【文件上传 前端】文件上传 前端 Part2 —— HTML5 文件指针方式所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。