您现在的位置是：首页 > 文章详情文章详情

html5+ajax实现文件拖拽上传

会飞的猪 2018-09-13 716人已围观

简介白码驿站是一个面向开发者的知识共享社区,专注于为开发者打造一个纯净的技术交流社区(源码下载,免费在线图片压缩,jquery插件,插件下载,JS/CSS在线压缩。)-白码驿站

使用HTML5的文件API，可以将操作系统中的文件直接拖放到浏览器的指定区域，实现文件上传到服务器。

实现步骤可以分为以下几步：

1、监听拖拽：监听页面元素的拖拽事件，包括：dragenter、dragover、dragleave和drop，一定要将dragover的默认事件取消掉，不然无法触发drop事件。如需拖拽页面里的元素，需要给其添加属性draggable=”true”；

2、获取拖拽文件：在drop事件触发后通过e.dataTransfer.files获取拖拽文件列表，.length属性获取文件数量，.type属性获取文件类型。

3、发送图片：使用FormData模拟表单数据AJAX提交文件流。

下面就来看看代码如何实现吧

Html代码：

                                        
    <div>
        <div id="drop_area" style="border: 1px #ccc solid; height: 300px; width: 500px;">
            请将图片拖拽到此区域</div>
        <div id="preview">
        </div>
    </div>

Jquery代码：

                                        
<script type="text/javascript">
    $(function () {
        HoldbackBorwser(); //阻止浏览器默认行。 
        MonitorDrop(); //监听拖拽事件
    });
 
 
    //阻止浏览器默认行。 
    function HoldbackBorwser() {
        $(document).on({
            dragleave: function (e) {    //拖离 
                e.preventDefault();
            },
            drop: function (e) {  //拖后放 
                e.preventDefault();
            },
            dragenter: function (e) {    //拖进 
                e.preventDefault();
            },
            dragover: function (e) {    //拖来拖去 
                e.preventDefault();
            }
        });
    }
 
    //监听拖拽事件
    function MonitorDrop() {
        var box = document.getElementById('drop_area'); //拖拽区域 
        box.addEventListener("drop", function (e) {
            e.preventDefault(); //取消默认浏览器拖拽效果 
            var fileList = e.dataTransfer.files; //获取文件对象 
            //循环遍历文件对象
            for (var i = 0; i < fileList.length; i++) {
                //检测文件是不是图片 
                if (fileList[i].type.indexOf('image') === -1) {
                    alert("您拖的不是图片！");
                    return false;
                }
                //拖拉图片到浏览器，可以实现预览功能 
                var img = window.URL.createObjectURL(fileList[i]);
                var filename = fileList[i].name; //图片名称 
                var filesize = Math.floor((fileList[0].size) / 1024);
                if (filesize > 10240) {
                    alert("上传大小不能超过10M.");
                    return false;
                }
                var str = "<img src='" + img + "'><p>图片名称：" + filename + "</p><p>大小：" + filesize + "KB</p>";
                $("#preview").append(str);
 
                //上传 
                UploadFile(fileList[i]);
            }
        }, false);
    }
 
    //上传图片
    function UploadFile(fileArray) {
        var formData1 = new FormData();
        formData1.append('fileName1', fileArray);
        // 提交图片数量
        formData1.append('count', 1);
        //开始上传图片
 
        $.ajax({
            url: 'Handler.ashx',
            type: 'POST',
            data: formData1,
            contentType: false,
            processData: false,
            async: false,
            success: function (json) {
                if (json.status == "true") {
                    alert("上传成功！文件名为：" + json.data);
                }
                else {
                    alert(json.msg);
                    return false;
                }
            },
            error: function () {
            }
        })
    }
</script>

html5+ajax实现文件拖拽上传