找回密码
当前位置：前端开发者 > 教程 > 正文

前端拖拽文件上传，并预览图片

2018-11-14 22:37:43 分类：教程 阅读(120) 评论(0)
sublime插件前端开发环境
前端开发地图插件
web前端开发分页插件

平时经常用微云，微云和其他的云盘都可以在桌面直接拖拽文件上传，今搜到此功能的代码
等研究明白了把兼容性搞一下；
顺便把代码贴上来：

html 代码片段

<!DOCTYPE html>
<html>
    <head> </head>
    <body>
        <div id=”drop_area” style=”width:300px;height:200px;background:#fcc;”>
            请将图片拖拽至此
        </div>
        <div id=”preview”></div>
        <script>
            //阻止默认事件
            window.onload = function() {
                //拖离
                document.addEventListener(‘dragleave’, function(e) {
                    e.preventDefault()
                })
                //拖后放
                document.addEventListener(‘drop’, function(e) {
                    e.preventDefault()
                })
                //拖进
                document.addEventListener(‘dragenter’, function(e) {
                    e.preventDefault()
                })
                //拖来拖去
                document.addEventListener(‘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 image = document.createElement(‘img’)
                        image.src = img
                        var p = document.createElement(‘p’)
                        p.innerHTML =
                            ‘图片名称：’ +
                            filename +
                            ‘<br/>大小：’ +
                            filesize +
                            ‘KB’
                        document.getElementById(‘preview’).appendChild(image)
                        document.getElementById(‘preview’).appendChild(p)
                        //上传
                        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>
    </body>
</html>
atom的前端开发插件
chrome 插件 前端开发
前端开发火狐插件
» 本文来自：前端开发者 » 《前端拖拽文件上传，并预览图片》
» 本文链接地址：https://www.rokub.com/6435.html
» 您也可以订阅本站：https://www.rokub.com
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论