html5文件上传

最新推荐文章于 2024-05-27 14:35:29 发布

黛梨

最新推荐文章于 2024-05-27 14:35:29 发布

阅读量3.6k

点赞数 1

分类专栏：代码示例 html（5）文章标签： html5 拖拽上传文件上传上传的方法事件

本文链接：https://blog.csdn.net/pedrojuliet/article/details/63261213

版权

代码示例同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

html（5）

6 篇文章 0 订阅

订阅专栏

作为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
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
html5文件上传

作为H5的一部分，web存储得到了很好的支持，但不是存取数据的唯一方式，为了实现与存储相关的不同任务，也出现了其他几种不同的标准，其中一个就是File API，从技术角度讲他并不是h5的规范内容，但是现在的浏览器却是有着较好的支持，当然IE除外。1.用input读取文本文件<!DOCTYPE html><html><head><title>h5文件上传</title><meta name="
复制链接

扫一扫

专栏目录