原生js上传文件,使用new FormData()
当创建一个内容较多的表单,表单里面又有了文件上传,文件上传也需要表单提交,单一的上传文件很好操作;
<form action="接口" enctype="multipart/form-data" method="post">
<input type="file" name="uploadFile"/>
<input type="submit" value="提交"/>
</form>
但是,正常提交数据和上传文件不是一个接口,后台接收参数的方式也是不一样的;这就需要两个form表单,但是form表单是不能嵌套的;还有就是表单的内容是按照顺序排列的,穿件两个独立的表单,写样式会很麻烦;
因此需要一个动态创建form表的js代码
这个方法只支持到IE10,IE10以下不支持new FormData();
//获取文件
function addFile() {
document.getElementById('test1').value = "";
var file = document.querySelector('input[type=file]').files[0];//IE10以下不支持
var typeStr="image/jpg,image/png,image/gif,image/jpeg";
if(typeStr.indexOf(file.type)>=0){
document.getElementById('test1').value = file.name;
if (file.size > 2097152) {
alert("上传的文件不能大于2M");
return;
}else{
upload(path,file)
}
}else{
alert("请上传格式为jpg、png、gif、jpeg的图片");
}
//上传文件
function upload(path,theFormFile) {
var fd = new FormData();
fd.append('file1', theFormFile);//上传的文件: 键名,键值
var url = path;//接口
url = url ? url : '';
var XHR = null;
if (window.XMLHttpRequest) {
// 非IE内核
XHR = new XMLHttpRequest();
} else if (window.ActiveXObject) {
// IE内核,这里早期IE版本不同,具体可以查下
XHR = new ActiveXObject("Microsoft.XMLHTTP");
} else {
XHR = null;
}
if (XHR) {
XHR.open("POST", url);
XHR.onreadystatechange = function() {
if (XHR.readyState == 4 && XHR.status == 200) {
var resultValue = XHR.responseText;
var data = JSON.parse(resultValue);
XHR = null;
}
}
XHR.send(fd);
}
};
原生js上传文件,使用new FormData()的更多相关文章
- HTML5+AJAX原生分块上传文件的关键参数设置
processData:false 这是jquery.ajax的一个参数.默认值为true,表示会将非字符串对象自动变成k1=v1&k2=v2的形式,例如一个数组参数{d:[1,2]},到服务 ...
- js 上传文件后缀名的判断 var flag=false;应用
js 上传文件后缀名的判断 var flag=false;应用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...
- koa2:通过Ajax方式上传文件,使用FormData进行Ajax请求
koa2通过表单上传的网上很多,但通过Ajax方式上传文件,使用FormData进行Ajax请求,不好找. 参考了这个用base64上传图片的例子.https://github.com/Yuki-Mi ...
- js上传文件带参数,并且,返回给前台文件路径,解析上传的xml文件,存储到数据库中
ajaxfileupload.js jQuery.extend({ createUploadIframe: function(id, uri) { //create frame var frameId ...
- 原生Servlet 上传文件
依赖jar <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons ...
- 使用ajaxfileupload.js上传文件
一直以来上传文件都是使用form表单上传文件,也看到过有人使用js上传文件,不过看起来蛮简单的也就没有怎么去理会.今天突然要使用这种方式上传文件,期间还遇到点问题.因此就记录下来,方便以后遇到这样的问 ...
- atitit.javascript js 上传文件的本地预览
atitit.javascript js 上传文件的本地预览 1. .URL.createObjectURL 1 1.1. 吊销所有使用 URL.createObjectURL 而创建的 URL,以 ...
- 使用curl 上传文件,multipart/form-data
使用curl 上传文件,multipart/form-data 1. 不使用-F,curl内置multipart/form-data功能: 2. 文件内容与真实数据无关,用abc代替数据,依然可以上传 ...
- 前端js上传文件 到后端接收文件
下面是前端js代码: <html> <head> <meta http-equiv="Content-Type" content="text ...
随机推荐
- 猴哥来了-游戏开发记录17-微信排行榜bug
上线后排行榜bug 1.排序算法 const dataSorter = (gameDatas, field = Consts.OpenDataKeys.LevelKey) => { let d ...
- Django的select_related 和 prefetch_related 函数优化查询
在数据库有外键的时候,使用 select_related() 和 prefetch_related() 可以很好的减少数据库请求的次数,从而提高性能.本文通过一个简单的例子详解这两个函数的作用.虽然Q ...
- What Your Computer Does While You Wait.CPU的等待有多久?
原文标题:What Your Computer Does While You Wait 原文地址:http://duartes.org/gustavo/blog/ [注:本人水平有限,只好挑一些国外高 ...
- openstack-- neutron 二/三层网络实现探究
引出 Neutron 是openstack 中提供网络虚拟化的组件,根据二层网络的实现方式不同(即agent的不同),可以分为Linux bridge的方式,Openvswitch的方式.而且,lay ...
- Android图片变形,ImageView属性的设置。
<ImageView android:id="@+id/iv" android:layout_width="match_parent" android:l ...
- 使用原子类或synchronized(没用Lock)解决阐述多线程所遇到线程安全问题和解决方案
例子题目: 创建10个线程,每个线程执行10000次加1,输出总和 正常结果100000 但是如果出现线程不安全会低于100000 import java.util.concurrent.Count ...
- SQL各种语(持续更新)
--通过分组查询,并查询各个组下面的数据数量 SELECT cord,COUNT(*) AS s FROM View_QualityPolicy GROUP BY cord ORDER BY s DE ...
- uiautomator2.0的配置的两种方法
方法一(使用在线下载的方式导入依赖): 1.首先创建项目工程,创建的项目的android_api版本要与测试的android_api版本一致(24就是24 ,不能26或者17去兼容) 2.然后就是将本 ...
- 服务器搭建私人Git
环境是CentOS 7.4 64位 主要参考:在服务器上搭建 Git 0. 预备 安装git yum install git 1. 开发者-生成个人SSH公钥 p.s. 书中的4.3节是[生成个人的S ...
- 我也说说Nginx——先搞搞清楚
一.Nginx的诞生 这个很多文章里都有,总之就是当年啊有个技术困难叫C10K问题,就是如何解决10万个客户端的并发请求问题.然后有个俄罗斯大牛某某某,在02年使用C语言搞了个东东声称可以处理每天5亿 ...