<!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 file3 - 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_file2.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(); // file_data.split(",")[1],此处文件流为base64后的结果,需要将结果中的逗号前的信息去除(逗号前是给image标签显示用的) formdata.append("file_content",file_data.split(",")[1]); formdata.append("file_name",file_name); formdata.append("file_type",file_type); xmlhttp.send(formdata); } }; fr.readAsDataURL(file); } } }); </script> </body> </html>
使用HTML5读取图片显示缩略图,并使用文件流方式上传有以下几个注意点:
1、此方法和之前介绍的文件指针方式略有不同,是直接把文件流读取出来进行上传
2、此方法需支持HTML5的FileReader(即ie10+)
3、选择图片时,首先需要在input type="file” 加上accept的类型,其次也需要js进行正则校验文件的type(由于accept只是在文件选择器打开时筛选出符合条件的文件供用户选择,用户任然可以切换到所有文件,所以需要加上js的正则过滤,以确保文件类型正确)
4、由于FileReader读取文件流是一个异步的过程,图片预览必须写在FileReader的onloadend函数中,等文件流读取完毕后才能获取到base64之后的图片流,由于是直接把文件流上传,所以立即上传的操作也必须是写在FileReader的onloadend函数中,等文件流读取完毕后才能将获取到的文件流上传(不是立即上传,而是点击按钮上传的,也需要有标志位控制告诉是否文件流已经读取完毕)
5、上传的文件流需要切分,读取为base64的图片流有(data:image/png;base64,...)这样的头,需要把逗号之前的切掉才是真实的base64的文件流
6、这个方法是用http模拟ajax的方法异步上传文件,所以页面不会跳转,但是值得注意的是传统jQuery中的ajax是无法上传文件的
7、提交到的upload_file2.php具体如何接受文件,也会在之后文件上传-后端部分进行介绍版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。