js拖拽文件上传

刚做完这个功能,把关键代码拿出来分享一下,如有毛病,各位指正。


     //进入
    jsDrag.addEventListener( "dragenter", function (e) {
        e.preventDefault();
        dragTip.text( "drop it" );
    }, false);
    
    //拖动
    jsDrag.addEventListener( "dragover", function (e) {
        e.preventDefault();
    }, false );
    
    //离开
    jsDrag.addEventListener( "dragleave", function (e) {
        e.preventDefault();
    }, false );
    
    //松开
     特别注意一个万年坑: 绑定事件时用原生js对象,否则drop的时候获取不到dataTransfer属性。

    jsDrag.addEventListener( "drop", function (e) {
        e.preventDefault();
        dragTip.text( "Or simply drag files to here" );

        var dt = e.dataTransfer;
        uploadFile( dt.files[0] );
    }, false );

//文件上传
    function uploadFile( fObj ){
        var fSize = ( fObj.size / 1024 / 1024 ).toFixed(2),
            fName = fObj.name,
            fType = fObj.type;

        var fd = new FormData();
        fd.append( "uploadfile", fObj );

        var xhr = new XMLHttpRequest();
        xhr.upload.addEventListener("progress", uploadProgress, false);

        xhr.addEventListener( "load", uploadComplete, false );
        xhr.addEventListener( "error", uploadFailed, false );
        xhr.addEventListener( "abort", uploadCanceled, false );

        xhr.open( "POST", url, true );
        xhr.send( fd );        
    }

    //进度把控
    function uploadProgress( evt ){
        if( evt.lengthComputable ){
            var percentComplete = Math.round( evt.loaded * 100 / evt.total );
            console.log( "已上传:" + percentComplete );
        }
    }

(完)



最全的前端资源导航:http://www.iwan0.com/ 

里面还有时常更新的冷笑话哟




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值