使用 FileReader 实现图片预览和拖放图片

最新推荐文章于 2018-07-18 10:54:29 发布

小与哥

最新推荐文章于 2018-07-18 10:54:29 发布

阅读量361

点赞数 2

分类专栏： html5 js 文章标签：图片函数

本文链接：https://blog.csdn.net/qq_23039605/article/details/54378020

版权

js 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

html5

2 篇文章 0 订阅

订阅专栏

具体示例代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
    function showPreview(element){

        // input files 属性
        var file = element.files[0];
        // 判断文件类型
        if(!file.type.match('image')){
            alert("必须是图片");
            return false;
        }

        // 读取文件内容
        if(FileReader){
            var reader = new FileReader();
            reader.onload = function(){
                document.getElementById("image").src = this.result;
            };
            reader.readAsDataURL(file);

        }
    }
</script>
</head>
<body>
    <form action="/ydgos/shippingOrder/uploadPic.jspx" enctype="multipart/form-data" id="shippingOrderForm" method="post">
        <!-- 1. 预览图片 -->
        <!-- <input type="file" onchange="showPreview(this)"/>
        <img height=200 width=200 src="" id="image"/> -->

        <!-- 2. 拖放图片 -->
        <input type="file" name="audio" id="input1"/>
        <div id="dropBox" style="width:200px;height:200px;border:2px red solid"></div>

        <input type="submit"/>
    </form>

    <script type="text/javascript">
        var dropBox = document.getElementById('dropBox'); 
        // 添加事件监听  三个参数分别是： event、function、useCapture
        dropBox.addEventListener('dragenter',dragenter, false);
        dropBox.addEventListener('dragover',dragover, false);
        dropBox.addEventListener('drop',drop, false);

        function dragenter(e){
            e.preventDefault();
            e.stopPropagation();
        }
        function dragover(e){
            e.preventDefault();
            e.stopPropagation();
        }
        function drop(e){
            e.preventDefault();
            e.stopPropagation();
            var data = e.dataTransfer;
            var files = data.files;
            if(files.length){
                var firstFile = files[0];

                var reader = new FileReader();
                reader.onload=function(e){
                    document.getElementById('dropBox').style.backgroundImage =  "url(" +this.result +")";
                    document.getElementById('dropBox').style.backgroundSize = 'contain';
                    document.getElementById('dropBox').style.backgroundRepeat = 'no-repeat';
                    document.getElementById('dropBox').style.backgroundPosition = 'center center';
                }
                reader.readAsDataURL(firstFile);

                // 给输入框赋值
                var input = document.getElementById('input1');
                input.files = data.files;
            }
        }
    </script>
</body>
</html>

效果图片如下：
这里写图片描述

小与哥

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用 FileReader 实现图片预览和拖放图片

具体示例代码如下：<!DOCTYPE html><html><head><meta charset="UTF-8"><script> function showPreview(element){ // input files 属性 var file = element.files[0]; // 判断文件类型 if(!fil
复制链接

扫一扫

专栏目录