当创建一个内容较多的表单,表单里面又有了文件上传,文件上传也需要表单提交,单一的上传文件很好操作;

<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()的更多相关文章

  1. HTML5+AJAX原生分块上传文件的关键参数设置

    processData:false 这是jquery.ajax的一个参数.默认值为true,表示会将非字符串对象自动变成k1=v1&k2=v2的形式,例如一个数组参数{d:[1,2]},到服务 ...

  2. js 上传文件后缀名的判断 var flag=false;应用

    js 上传文件后缀名的判断  var flag=false;应用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...

  3. koa2:通过Ajax方式上传文件,使用FormData进行Ajax请求

    koa2通过表单上传的网上很多,但通过Ajax方式上传文件,使用FormData进行Ajax请求,不好找. 参考了这个用base64上传图片的例子.https://github.com/Yuki-Mi ...

  4. js上传文件带参数,并且,返回给前台文件路径,解析上传的xml文件,存储到数据库中

    ajaxfileupload.js jQuery.extend({ createUploadIframe: function(id, uri) { //create frame var frameId ...

  5. 原生Servlet 上传文件

    依赖jar <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons ...

  6. 使用ajaxfileupload.js上传文件

    一直以来上传文件都是使用form表单上传文件,也看到过有人使用js上传文件,不过看起来蛮简单的也就没有怎么去理会.今天突然要使用这种方式上传文件,期间还遇到点问题.因此就记录下来,方便以后遇到这样的问 ...

  7. atitit.javascript js 上传文件的本地预览

    atitit.javascript js 上传文件的本地预览 1. .URL.createObjectURL  1 1.1. 吊销所有使用 URL.createObjectURL 而创建的 URL,以 ...

  8. 使用curl 上传文件,multipart/form-data

    使用curl 上传文件,multipart/form-data 1. 不使用-F,curl内置multipart/form-data功能: 2. 文件内容与真实数据无关,用abc代替数据,依然可以上传 ...

  9. 前端js上传文件 到后端接收文件

    下面是前端js代码: <html> <head> <meta http-equiv="Content-Type" content="text ...

随机推荐

  1. POJ K-th Number

    [题解] 数据结构采用线段树.通过将数组的每一段归并排序来建树.将数组排序来实现离散化. 时间复杂度分析:建树的过程就是归并排序,其时间复杂度为O(nlog(n)).查询时:二分查找第k小元素的复杂度 ...

  2. 学习js第一天小结

    1.JavaScript的书写方式: <script type="text/javascript">     </script> <script sr ...

  3. Android软键盘遮挡布局问题;

    布局被软键盘遮挡虽然不是什么大问题,但还是比较影响用户体验的:最让人恼火的是当前输入框被软键盘被遮挡,来看一下解决方法: 1.当前输入框被软键盘遮挡,仅把输入框显示出来,不改变整体布局: 设置Mani ...

  4. solr学习之域的管理与中文分析器配置

    该文使用  Centos6.5 64 位    solr4.10.3   IK-Analyzer中文分析器 一.solr域 在solr中域的概念与lucene中域的概念相同,数据库的一条记录或者一个文 ...

  5. pip 国内源

    pip install django -i http://mirrors.aliyun.com/pypi/simple --trusted-host mirrors.aliyun.com pip in ...

  6. Maven上传jar包到私服

    1.认证,在M2_HOME/conf/settings.xml配置用户名密码 <server> <id>releases</id> <username> ...

  7. Maven项目指定JDK版本

    <build> <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> ...

  8. Java的I/O对文件的操作

    I/O操作主要是指使用Java进行输入,Java所有的I/O机制都是基于数据流进行输入输出,这些数据流表示了字符或者字节数据的流动序列. 主要是通过下面两个类实现对文件的输入输出操作: FileInp ...

  9. Dubbo(1)--初识Dubbo

    1. 为什么需要 Dubbo 随着互联网的发展,网站应用的规模不断扩大,常规的垂直应用架构已无法应对,分布式服务架构以及流动计算架构势在必行,亟需一个治理系统确保架构有条不紊的演进. 单一应用架构 当 ...

  10. oracle数据库创建并导入dmp文件

    导出:exp userid=xcgwjxuser/xcgwjxuser@orcl file=D:\xcgwjx2014.dmp 导入:imp userid=xcgwjxuser/xcgwjxuser@ ...