html5文件上传

来源：互联网发布：取名软件免费版编辑：程序博客网时间：2024/06/07 13:27

作为H5的一部分，web存储得到了很好的支持，但不是存取数据的唯一方式，为了实现与存储相关的不同任务，也出现了其他几种不同的标准，其中一个就是File API，从技术角度讲他并不是h5的规范内容，但是现在的浏览器却是有着较好的支持，当然IE除外。

1.用input读取文本文件

<!DOCTYPE html><html><head><title>h5文件上传</title><meta name="viewport" content="width=device-width, initial-scale=1"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="keywords" content="" /><style type="text/css">.leftbox{    width:50%;    height:700px;    border:1px #000 solid;}#fileOutput{    width:90%;    height:80%;    border:1px #ccc solid;}</head><body>    <div class="leftbox">        <input id="fileInput" type="file" onchange="processFiles(this.files)" >        <!-- <input id="fileInput" type="file" onchange="processFiles(this.files)" multiple> -->        <div id="fileOutput">        </div>    </div></body><script type="text/javascript">    function processFiles(files){        var file = files[0];   //从input提供的文件集中取得第一个文件。若要选择儿多个文件使用multiple属性如上html代码，那么这里就要用个for循环了。。。。        var reader = new FileReader(); //创建FileReader对象，以便处理文件        reader.onload = function(e){//这个时间一旦发生，就表明数据存储完成            var output = document.getElementById('fileOutput');            output.textContent = e.target.result;//将内容复制到div中        };        reader.readAsText(file);//将取出的文本内容转换为长字符串，保存在onload事件的e.target.result中。    }</script></html>

2.通过拖拽读取图片文件

<!DOCTYPE html><html><head><title>h5文件上传</title><meta name="viewport" content="width=device-width, initial-scale=1"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="keywords" content="" /><style type="text/css">.rightbox{    float:right;    background-color: #ccc;    width:50%;height:700px;    margin-top: -701px;border:1px #000 solid;}#dropbox{    margin:15px;    width:300px; height:300px;    border:3px dashed gray;    border-radius: 8px;    background-size: 100%;    background-repeat: no-repeat;    text-align: center;}#dropbox div{    margin:100px 70px;    color:orange; font-size: 25px;    font-family: Verdana,Arial,sans-serif;}</style></head><body>    <div class="rightbox">        <div id="dropbox">            <div>drop you image here......</div>         </div>    </div></body><script type="text/javascript">    var dropbox;    window.onload = function(){        dropbox = document.getElementById("dropbox");        dropbox.ondrapenter = ignoreDrag;        dropbox.ondrapover = ignoreDrag;        dropbox.ondrop = drop;    };    function ignoreDrag(e){        e.stopPropagation();        e.preventDefault();//确保不会有其它元素取得这个事件    }    function drop(e){        e.stopPropagation();        e.preventDefault();//取消事件传播及默认行为        var data = e.dataTransfer;//取得拖进来的文件        var files = data.files;        processFiles_one(files);//将其传给真真处理文件的函数。    }    function processFiles_one(files){        var file = files[0];           var reader = new FileReader(); //创建FileReader对象，以便处理文件        reader.onload = function(e){//这个时间一旦发生，就表明数据存储完成            dropbox.style.backgroundImage = "url("' + e.target.result + '")";        };        reader.readAsDataURL(file);//读取图片    }</script></html>

3.html5+jquery实现拖拽上传图片并保存

<!DOCTYPE html><html lang><head><meta charset="UTF-8"><title>H5+jquery拖拽</title><script src = "js/jquery-2.1.1.min.js"></script><style type="text/css">.test{    width:100%;    height:600px;}#preview{    margin:15px;    width:500px; height:450px;    border:3px dashed gray;    border-radius: 8px;    background-size: 100%;    background-repeat: no-repeat;    text-align: center;}#drop_area{    margin:20px 70px;    color:orange; font-size: 25px;    font-family: Verdana,Arial,sans-serif;}</style></head><body><div class="test">　<div id="drop_area">将图片拖拽到此区域</div>     <div id="preview"></div> </div></body><script>$(function(){     //阻止浏览器默认行。     $(document).on({         dragleave:function(e){    //拖离             e.preventDefault();         },         drop:function(e){  //拖后放             e.preventDefault();         },         dragenter:function(e){    //拖进             e.preventDefault();         },         dragover:function(e){    //拖来拖去             e.preventDefault();         }     });     var box = document.getElementById('drop_area'); //拖拽区域     box.addEventListener("drop",function(e){         e.preventDefault(); //取消默认浏览器拖拽效果         var fileList = e.dataTransfer.files; //获取文件对象         //检测是否是拖拽文件到页面的操作         if(fileList.length == 0){             return false;         }         //检测文件是不是图片         if(fileList[0].type.indexOf('image') === -1){             alert("您拖的不是图片！");             return false;         }         //拖拉图片到浏览器，可以实现预览功能         var img = window.webkitURL.createObjectURL(fileList[0]);         var filename = fileList[0].name; //图片名称         var filesize = Math.floor((fileList[0].size)/1024);          if(filesize>500){             alert("上传大小不能超过500K.");             return false;         }         var str = "<img src='"+img+"'><p>图片名称："+filename+"</p><p>大小："+filesize+"KB</p>";         $("#preview").html(str);         //上传         xhr = new XMLHttpRequest();         xhr.open("post", "upload.php", true);         xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");         var fd = new FormData();         fd.append('mypic', fileList[0]);         xhr.send(fd);     },false); }); </script></html>

这里有几个重要的事件及其方法：

multiple属性，允许用户选择多个文件。
FileReader（）：用来提取文件的内容。
readAsText（）：用来处理包含文本内容的文件（只能处理文本，而不是二进制，即.docx和.xlsx文件）
readAsBinaryString（）：可以让应用处理二进制编码的数据。
readAsArrayBuffer（）：这个方法将数据读到一个数组中，每个数组项代表一字节数据。
readAsDataURL（）：让我们能方便的取得图片的数据。
dragleave：当文件拖离后触发事件
drop：将文件拖到放置区后触发事件
dragenter：将文本进入拖入区发生的事件
dragover：将文本拖在放置区之上时

1 0