html5 drag+FormData拖拽上传附件

接上一篇:

  <div id="dropbox">
                    Drag the excel to here

                </div>
 document.addEventListener("dragenter", function (e) {
                dropbox.style.borderColor = 'gray';
            }, false);
            document.addEventListener("dragleave", function (e) {
                dropbox.style.borderColor = 'silver';
            }, false);
            dropbox.addEventListener("dragenter", function (e) {
                dropbox.style.borderColor = 'gray';
                dropbox.style.backgroundColor = 'white';
            }, false);
            dropbox.addEventListener("dragleave", function (e) {
                dropbox.style.backgroundColor = 'transparent';
            }, false);
            dropbox.addEventListener("dragenter", function (e) {
                e.stopPropagation();
                e.preventDefault();
            }, false);
            dropbox.addEventListener("dragover", function (e) {
                e.stopPropagation();
                e.preventDefault();
            }, false);
            dropbox.addEventListener("drop", function (e) {
                e.stopPropagation();
                e.preventDefault();

                handleFiles(e.dataTransfer.files);


            }, false);
            handleFiles = function (files) {
                if (files.length === 0) { return; }
                var file = files[0];
                if (file['name'].split('.').slice(-1)[0].indexOf('xls') == -1) {
                    layer.alert('Only excle.'); return;
                }
                if (file['size'] > 10 * 1024 * 1024) {
                    layer('Max size:10M'); return;
                }


                var fd = new FormData();
                fd.append('mypic', file);
                upload(fd);//ajax func


            }

c#端亦是通过context.Request.Files 来获取附件


e.dataTransfer.files

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值