文档章节

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

放开那个女孩
 放开那个女孩
发布于 06/14 11:49
字数 185
阅读 9
收藏 0
点赞 0
评论 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); }
       );

     

© 著作权归作者所有

共有 人打赏支持
放开那个女孩
粉丝 2
博文 110
码字总数 43036
作品 0
杭州
程序员
ajax文件异步提交的实现

WEB 2.0 的时代之所以不同,是因为大量的在页面当中使用了 ajax 使得单一页面对于用户做到无刷新的友好交互。但是一旦页面牵扯到文件上传就出现了一些问题,大家知道因为使用文件上传的话,是...

香吉士 ⋅ 2013/01/21 ⋅ 0

form表单提交的几种方法

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

alokka的博客 ⋅ 2017/12/11 ⋅ 0

异步上传文件并获得返回值(完全跨域)

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

跑龙套 ⋅ 2014/03/10 ⋅ 0

从实战中学前端:打造自己的html5文件上传插件

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

有力量的神经病 ⋅ 2016/12/17 ⋅ 0

【完全跨域】异步上传文件并获得返回值

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

蜗牛奔跑 ⋅ 2015/11/02 ⋅ 1

多种上传图片的方法

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

筱飞 ⋅ 2016/06/07 ⋅ 0

php与Ajax实例

AJAX的学习要有JavaScript、HTML、CSS等基本的Web开发能力 [AJAX介绍] Ajax是使用客户端脚本与Web服务器交换数据的Web应用开发方法。Web页面不用打断交互流程进行重新加裁,就可以动态地更新...

晨曦之光 ⋅ 2012/03/09 ⋅ 1

jQuery 关于IE9上传文件无法进入后台原因及解决办法(ajaxfileupload.js第四弹)

第四弹的诞生完全不在自己最初的计划之中,是有个网友看了先前关于《ajaxfileupload.js系列》的文章后提出的问题,由于自己一直是用chrome浏览器去测试demo,完全忽略IE浏览器(其实是故意的...

我不会抽烟 ⋅ 2014/09/11 ⋅ 0

jQuery插件之ajaxFileUpload上传文件

ajaxFileUpload.js 很多同名的,因为做出来一个很容易。 我用的是这个:https://github.com/carlcarl/AjaxFileUpload 下载地址在这里:http://files.cnblogs.com/files/kissdodog/ajaxfileup...

hello菜bird ⋅ 2016/12/01 ⋅ 0

AJAX的post请求与上传文件

班级编号:VIP14 学员名字:端碗吹水 课程名称:AJAX的post请求与上传文件 上课时间:2017-12-26 AJAX的post请求 之前介绍了AJAX的get的请求方式与跨域请求,除此之外AJAX还可以进行异步的p...

ZeroOne01 ⋅ 2017/12/28 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

windows profesional 2017 build problem

.net framework .... https://stackoverflow.com/questions/43330915/could-not-load-file-or-assembly-microsoft-build-frameworkvs-2017...

机油战士 ⋅ 40分钟前 ⋅ 0

python3中报错的解决方法(长期更新)

1、ImportError: No module named ‘DjangoUeditor’ 出错原因:安装DjangoUeditor库适用于python2,需要下载适用python3的 下载地址:https://github.com/twz915/DjangoUeditor3 2、python3......

xiaoge2016 ⋅ 45分钟前 ⋅ 0

数据结构与算法之双向链表

一、双向链表 1.双向链表的结点结构 typedef struct DualNode{ ElemType data; struct DualNode *prior; // 前驱结点 struct DualNode *next; // 后继结点}DualNode, *DuL...

aibinxiao ⋅ 今天 ⋅ 0

五大最核心的大数据技术

大数据技术有5个核心部分,数据采集、数据存储、数据清洗、数据挖掘、数据可视化。关于这5个部分,有哪些核心技术?这些技术有哪些潜在价值?看完今天的文章就知道了。 大数据学习群:7165810...

董黎明 ⋅ 今天 ⋅ 0

PhpStorm 头部注释、类注释和函数注释的设置

首先,PhpStorm中文件、类、函数等注释的设置在:setting-》Editor-》FIle and Code Template-》Includes下设置即可,其中方法的默认是这样的: /**${PARAM_DOC}#if (${TYPE_HINT} != "v...

nsns ⋅ 今天 ⋅ 0

spring.net AOP

http://www.springframework.net/doc-latest/reference/html/aop-quickstart.html https://www.cnblogs.com/wujy/archive/2013/04/06/3003120.html...

whoisliang ⋅ 今天 ⋅ 0

【HAVENT原创】创建 Dockerfile 生成新的镜像,并发布到 DockerHub

注意:Win7 与 Win10 的版本存在差异,Win7 版本使用 Docker Quickstart Terminal 进入控制台,Win10下面直接用管理员权限打开控制台或者 PowerShell 即可;另外 Win7 下面只能访问 C盘,/ap...

HAVENT ⋅ 今天 ⋅ 0

pom.xml出现web.xml is missing ...解决方案

提示信息应该能看懂。也就是缺少了web.xml文件,<failOnMissingWebXml>被设置成true了。 搜索了一下,Stack Overflow上的答案解决了问题,分享一下。 目前被顶次数最多的回答原文如下: This...

源哥L ⋅ 今天 ⋅ 0

js时间戳与日期格式之间相互转换

1. 将时间戳转换成日期格式 1 2 3 4 5 6 7 8 9 10 11 12 13 14 // 简单的一句代码 var date = new Date(时间戳); //获取一个时间对象 /** 1. 下面是获取时间日期的方法,需要什么样的格式自己...

Jack088 ⋅ 今天 ⋅ 0

web添加log4j

添加xml配置log4j.properties # Global logging configuration---root日志设置#log4j.rootLogger=info,dailyRollingFile,stdoutlog4j.rootLogger=debug,stdout,dailyRollingFile---......

黄柳淞 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部