form提交base64的小方法

    在开发过程中,我最近碰到个问题,就是拖拽上传附件。其实最简单的方法就是利用FormData实现上传,(具体可以查看https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects),这里我说的是换一种思路实现的方法,就是利用submit()。

    html:

<iframe name="" id="iframeId" style="display: none;"></iframe>'+
<form action="/public_upload/multi" id="" method="post" target="iframeId" enctype="multipart/form-data" >
   <input type="file" id="" name="upfile" hidden multiple="multiple" style="cursor:pointer;" />
</form>

js

var dz = document.getElementById('dragAndDropBox');
dz.ondragover = function (ev) {
    ev.preventDefault();

};
dz.ondragleave = function () {

};
dz.ondrop = function (ev) {
    ev.preventDefault();//阻止浏览器打开图片
    var files = ev.dataTransfer.files;
    if (files.length > 1){
        // layer.alert('只支持一张张图片拖拽上传!');
        layer.msg('只支持一张张图片拖拽上传!', {time:1500,shade:0.6,icon: 2,shadeClose:true});
        return false;
    }

    var fr    =   new FileReader();
    var f = files[0];
    fr.readAsDataURL(f);
    fr.onload = function () {
        var data = this.result;
        if (data){
            $('#dragAndDrop_file').val(data);
            $('#dragAndDrop_from').submit();
        }

    };
}

阅读更多
个人分类: js
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭