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();
        }

    };
}

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值