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


版权声明:本文为qq_30646709原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。