form提交base64的小方法

原创 2018年04月16日 10:34:55

    在开发过程中,我最近碰到个问题,就是拖拽上传附件。其实最简单的方法就是利用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();
        }

    };
}

小程序表单提交

小程序form表单提交 1.小程序相对于之前的WEB+PHP建站来说,个人理解为只是将web放到了微信端,用小程序固定的格式前前端进行布局、事件触发和数据的输送和读取,服务器端可以用任何后端语言...
  • github_38696818
  • github_38696818
  • 2017-09-01 11:54:17
  • 552

微信小程序-form表单提交

效果html代码&amp;lt;form bindsubmit=&quot;formSubmit&quot; bindreset=&quot;formReset&quot;&amp;gt; &am...
  • zzwwjjdj1
  • zzwwjjdj1
  • 2018-02-23 16:42:14
  • 2016

微信小程序开发-form 表单提交和取值

我们知道,如果我们直接给 input 添加 bindinput,比如:,那么可以在 onUsernameInput 中直接使用 e.detail.value,即: onUsernameInput :...
  • lamenw
  • lamenw
  • 2017-09-05 14:20:54
  • 847

微信小程序中form 表单提交和取值实例详解

我们知道,如果我们直接给 input 添加 bindinput,比如:,那么可以在 onUsernameInput 中直接使用 e.detail.value,即: onUsernameInput :...
  • It_BeeCoder
  • It_BeeCoder
  • 2017-06-24 21:36:37
  • 3299

微信小程序六(数据请求 表单的创建 提交 与接收)

好了 开始正题了,本节小小研究了下 微信小程序的表单创建与提交 先看看效果 1. 表单页面 姓名: ...
  • wujiangwei567
  • wujiangwei567
  • 2016-10-12 12:32:12
  • 45395

小程序提交form表单

需求:我需要给后台提交一个集合, 前端:一个搜索框,用的form表单,几个复选框,想要把选中的所有复选框和搜索框中输入的值一并提交到后台, 问题:可能是我不知道如何用form表单提交复选框,所以我...
  • xuexixuexien
  • xuexixuexien
  • 2017-12-07 14:12:53
  • 660

form表单提交前做方法

方法一 保存 function tovalid(){ var str=$('#imgShow').find("img").attr("src"); ...
  • feicongcong
  • feicongcong
  • 2017-04-25 11:14:42
  • 427

form表单提交的几种方法

form表单提交的几种方法 姓名: 性别: 男 女 年龄:...
  • itmyhome
  • itmyhome
  • 2014-12-12 21:40:58
  • 54140

html form表单提交后不刷新不跳转的实现方法

html>       body>              form action="" method="post" target="nm_iframe">           input ...
  • qq_39650528
  • qq_39650528
  • 2018-01-04 10:48:37
  • 117

[微信小程序]提交表单返回成功后自动清空表单的值

对微信小程序有兴趣的可以关注我或者加入我的微信小程序开发交流qq群(173683895)相互交流学习。 禁止闲扯和广告。度娘没找到实现这个功能比较简单的方法,所有我就自己随意写了一个,如果有更好的写法...
  • qq_35713752
  • qq_35713752
  • 2017-12-02 10:31:58
  • 5263
收藏助手
不良信息举报
您举报文章:form提交base64的小方法
举报原因:
原因补充:

(最多只允许输入30个字)