jq拖拽文件实现进度条

js拖拽文件实现进度条

最近遇到个需求，浏览器拖拽功能，并且实现显示进度条

拖拽盒子省略了，自定义就行

// 禁止浏览器的默认拖拽打开文件的事件 ，dropZone 拖拽区域盒子
			var dropEle = document.querySelector('#dropZone');
            dropEle.addEventListener('drop', function (e) {
                //
            }, false);

            document.addEventListener('drop', function (e) {
                //
            }, false);

            dropEle.addEventListener("dragenter", function (e) {
                e.preventDefault();
                e.stopPropagation();
            }, false);

            dropZone.addEventListener("dragover", function (e) {
                e.preventDefault();
                e.stopPropagation();
            }, false);

            dropZone.addEventListener("dragleave", function (e) {
                e.preventDefault();
                e.stopPropagation();
            }, false);

            dropZone.addEventListener("drop", function (e) {
                e.preventDefault();
                e.stopPropagation();
                // 拖拽进入的事件
                var files = e.dataTransfer.files
      
                var filesName = files[0].name;
                var extStart = filesName.lastIndexOf(".");
                var ext = filesName.substring(extStart,filesName.length).toUpperCase();
                    $('#filename').html(filesName)
					// 文件拖拽进入触发test事件
                    test(files);

                    i++;
                }
                // 进度条出现
                $("#example1").show();
            })

            function test(a) {
                var formData = new FormData()
                formData.append("fileName", a[0]);
                $.ajax({
                    url: "***",
                    type: "POST",
                    data: formData,
                    dataType: "JSON",
                    cache: false,
                    processData: false,
                    contentType: false,
                    xhr: function () {
                        var xhr = $.ajaxSettings.xhr();
                        if (xhr.upload) {
                            xhr.upload.onprogress = function (progress) {
                                if (progress.lengthComputable) {
                                    let str = progress.loaded / progress.total * 100
                                    // 此处获取到了上传进度百分比str。就可以做css操作了
                                    if(str == 100 ){
                                        $("#example1").hide();
                                    }  
                                }
                            };
                            xhr.upload.onloadstart = function () {
                                console.log('开始');
                            };
                        }
                        // 一定记得要return xhr 不然后面就没有xhr用了
                        return xhr;
                    }，
                    success:function(val){
						// 此处做判断语句
					}
                })
            };
            ```