文档章节

input type= file通过ajax 来异步上传

放开那个女孩
 放开那个女孩
发布于 06/14 11:49
字数 185
阅读 15
收藏 0
  1. input类型设为file:
    <label for="img_input"></label> <input id="img_input" type="file"/>

     

  2. 获取文件内容:

    var file = document.getElementById('fileToUpload').files[0];

     

  3. 上传: XMLHttpRequest Level 2添加了一个新的接口FormData。利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件。比起普通的Ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件。

    // 创建 
    var form_data = new FormData(); 
    // 获取文件 
    var file_data = $("#img_input").prop("files")[0]; 
    // 把所以表单信息 
    form_data.append("id", "001"); 
    form_data.append("name", "test"); 
    form_data.append("img", file_data); 
    $.ajax({ 
      type: "POST",
      url: "....",
      dataType : "json",
      processData: false, // 注意:让jQuery不要处理数据
      contentType: false, // 注意:让jQuery不要设置
      contentType data: form_data
    }).success(
        function(msg) { console.log(msg); }
       ).fail(
        function(msg) { console.log(msg); }
       );

     

© 著作权归作者所有

共有 人打赏支持
放开那个女孩
粉丝 3
博文 112
码字总数 43036
作品 0
杭州
程序员
私信 提问
从实战中学前端:打造自己的html5文件上传插件

写在前面的废话:文件上传在web开发当中非常普遍,比如新闻图片、用户头像、商品图片等等,在html5几乎占据统治地位(但是依然有部分顽固派人士)的情况下,基于html5的文件上传也占了多数(...

有力量的神经病
2016/12/17
42
0
form表单提交的几种方法

在form标签中添加Action(提交的地址)和method(post),且有一个submit按钮 ()就可以进行数据的提交,每一个input标签都需要有一个name属性,才能进行提交 当点击登陆时,向数据库发生的数据是...

alokka的博客
2017/12/11
0
0
异步上传文件并获得返回值(完全跨域)

异步上传文件并获得返回值(完全跨域) AJAX可以进行数据的异步请求,但对于文件和跨域问题却束手无策。 Jsonp可以进行跨域数据的异步请求,但同样不能使用于文件。 <form>表单可以进行跨域数...

跑龙套
2014/03/10
0
0
【完全跨域】异步上传文件并获得返回值

【完全跨域】异步上传文件并获得返回值 作者:php-note.com 发布于:2015-03-01 10:58 分类:JS/jQuery 浏览(595) AJAX可以进行数据的异步请求,但对于文件和跨域问题却束手无策。 Jsonp可以...

蜗牛奔跑
2015/11/02
0
1
多种上传图片的方法

tags: 图片上传, multipart, 截图上传, file对象, FormData, 拖拽上传图片, dataTransfer, readAsDataURL 一个如下所示的发布框,经常会出现在各种微博、社区、论坛站点上,这类发布形式虽然...

筱飞
2016/06/07
74
0

没有更多内容

加载失败,请刷新页面

加载更多

CentOS 安装PHP5和PHP7

安装PHP5 下载解压二进制包 [root@test-a src]# cd /usr/local/src/[root@test-a src]# wget http://cn2.php.net/distributions/php-5.6.32.tar.bz2[root@test-a src]# tar jxvf php-5.6......

野雪球
今天
4
0
windows上类似dnsmasq的软件Dual DHCP DNS Server

官网地址:http://dhcp-dns-server.sourceforge.net/官网定向的下载地址:https://sourceforge.net/projects/dhcp-dns-server/files/ 设置参考地址:http://blog.51cto.com/zhukeqiang/18264......

xueyuse0012
今天
3
0
LinkedHashMap源码解析

前言 HashMap中的元素时无序的,也就是说遍历HashMap的时候,顺序和放入的顺序是不一样的。 如果需要有序的Map,就可以采用LinkedHashMap. LinkedHashMap通过维护一个包含所有元素的双向链表,...

grace_233
今天
3
0
初识flask

文档 0.10.1版本 http://www.pythondoc.com/flask/index.html 1.0.2版本 https://dormousehole.readthedocs.io/en/latest/ 安装flask $ pip3 install flaskCollecting flask Downloading......

yimingkeji
昨天
5
0
Akka系统《sixteen》译

Actor是一个封装状态(state)和行为(behavior)的对象,它们只通过交换消息通信(放入收件人邮箱的邮件)。从某种意义上说,Actor是最严格的面向对象编程形式,但它更适合将他们视为人:在与Act...

woshixin
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部