Formdata 图片上传 Ajax
/*图片上传*/
$("点击对象").bind("click", function(e){ $('#form-upload').remove(); $('body').prepend('<form enctype="multipart/form-data" id="form-upload" style="display: none;"><input type="file" name="file" /></form>'); $('#form-upload input[name=\'file\']').on('change',upload_file); $('#form-upload input[name=\'file\']').trigger('click'); //触发点击事件 function upload_file(){
$.ajax({
url: 'submit.php',
type: 'post',
dataType: 'json',
data: new FormData($('#form-upload')[0]), // 注意此处传递的参数是DOM对象而不是jquery对象。获取属性值:data.get('属性名');
cache: false,
contentType: false, //禁止修改文件头
processData: false, //禁止对传递数据的处理
beforeSend: function() {
},
complete: function() {
},
success: function(json) {
//回调结果的处理
}
});
} })
DOM对象和jquery对象的区别
什么是jQuery对象?
---就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的,其可以使用jQuery里的方法。
比如:
$("#test").html() 意思是指:获取ID为test的元素内的html代码。其中html()是jQuery里的方法
这段代码等同于用DOM实现代码:
document.getElementById("id").innerHTML;
虽
然jQuery对象是包装DOM对象后产生的,但是jQuery无法使用DOM对象的任何方法,同理DOM对象也不能使用jQuery里的方法.乱使用会
报错。比如:$("#test").innerHTML、document.getElementById("id").html()之类的写法都是错误的。
还有一个要注意的是:用#id作为选择符取得的是jQuery对象与document.getElementById("id")得到的DOM对象,这两者并不等价。请参看如下说的两者间的转换。
既
然jQuery有区别但也有联系,那么jQuery对象与DOM对象也可以相互转换。在两者转换前首先我们给一个约定:如果一个获取的是jQuery对
象,那么我们在变量前面加上$,如:var $variab = jQuery对象;如果获取的是DOM对象,则与习惯普通一样:var variab =
DOM对象;这么约定只是便于讲解与区别,实际使用中并不规定。
jQuery对象转成DOM对象:
两种转换方式将一个jQuery对象转换成DOM对象:[index]和.get(index);
(1)jQuery对象是一个数据对象,可以通过[index]的方法,来得到相应的DOM对象。
如:var $v =$("#v") ; //jQuery对象
var v=$v[0]; //DOM对象
alert(v.checked) //检测这个checkbox是否被选中
(2)jQuery本身提供,通过.get(index)方法,得到相应的DOM对象
如:var $v=$("#v"); //jQuery对象
var v=$v.get(0); //DOM对象
alert(v.checked) //检测这个checkbox是否被选中
DOM对象转成jQuery对象:
对于已经是一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了。$(DOM对象)
如:var v=document.getElementById("v"); //DOM对象
var $v=$(v); //jQuery对象
转换后,就可以任意使用jQuery的方法了。
通过以上方法,可以任意的相互转换jQuery对象和DOM对象。需要再强调注意的是:DOM对象才能使用DOM中的方法,jQuery对象是不可以用DOM中的方法。
下面是其它的相关使用方法:
1、DOM对象转jQuery对象
普通的Dom对象一般可以通过$()转换成jQuery对象。
如:$(document.getElementById("msg"))
返回的就是jQuery对象,可以使用jQuery的方法。
2、jQuery对象转DOM对象
由于jQuery对象本身是一个集合。所以如果jQuery对象要转换为Dom对象则必须取出其中的某一项,一般可通过索引取出。
如: $("#msg")[0],$("div").eq(1)[0],$("div").get()[1],$("td")[5]
这些都是Dom对象,可以使用Dom中的方法,但不能再使用jQuery的方法。
以下几种写法都是正确的:
$("#msg").html();
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;
Formdata 图片上传 Ajax的更多相关文章
- laravel 图片上传 ajax 方式
laravel 图片上传 //后台轮播图上传 $("#img-upload").on('submit',function(e){ e.preventDefault(); var f ...
- js formData图片上传(单图上传、多图上传)后台java
单图上传 <div class="imgUp"> <label>头像单图</label> <input type=&quo ...
- JS兼容各个浏览器的本地图片上传即时预览效果\、
在firefox\chrome\ie10等浏览器中可以使用HTML5中的内容实现图片即时预览效果,在IE10以下浏览器中使用滤镜来解决图片显示问题. HTML5中的FileReader对象主要是把文件 ...
- 项目回顾3-再谈图片上传-FormData+ajax上传
上次在纠结图片上传用base64还是form表单,现在感觉好蠢,因为又开辟了第三条道路. 其实也根本用不到form 只需要一个上传文件的input就好了 <input id="file ...
- ssm使用Ajax的formData进行异步图片上传返回图片路径,并限制格式和大小
之前整理过SSM的文件上传,这次直接用代码了. 前台页面和js //form表单 <form id= "uploadForm" enctype="multipart ...
- 一个伪ajax图片上传代码的例子
一个伪ajax图片上传实现代码. 复制代码代码如下: <?php if($_FILES){ ?> <script> window.parent.ajaxUploadPi ...
- 在 PHP 中结合 Ajax 技术进行图片上传
前面几则日志中讲述了在 PHP 中上传文件,相信大家对 PHP 中如何进行文件上传已经初步掌握.本文来继续探讨在 PHP 中上传文件的技术,不同的是,本次上传将仅限于图片文件的上传,并且将采用 Aja ...
- 基于“formData批量上传的多种实现” 的多图片预览、上传的多种实现
前言 图片上传是web项目常见的需求,我基于之前的博客的代码(请戳:formData批量上传的多种实现)里的第三种方法实现多图片的预览.上传,并且支持三种方式添加图片到上传列表:选择图片.复制粘贴图片 ...
- ASP.NET Core 简单实现七牛图片上传(FormData 和 Base64)
ASP.NET Core 简单实现七牛图片上传(FormData 和 Base64) 七牛图片上传 SDK(.NET 版本):https://developer.qiniu.com/kodo/sdk/ ...
随机推荐
- c#多线程同步之EventWaitHandle的应用
最近在研究前辈写的winform代码,其中有一个功能,前辈用了EventWaitHandle.初读代码,有点不理解,慢慢想来,还是可以理解的.这个功能,就是执行某项比较耗时的任务,需要打开旋转图标,等 ...
- NGINX详解
目录 1. 基础概念 1 2. 版本选择 1 3. 服务安装 1 4. 模块说明 1 5. 配置说明 1 5.1 目录结构 1 ...
- 【CSS】 CSS的一些应用实例和参考
css 一些应用实例 基本抄自http://www.w3school.com.cn/css/css_align.asp ..把这些知识消化吸收然后以自己的话来解释一下 ■ 对齐 ● 用margin属 ...
- docker教程
Docker 包括三个基本概念 镜像(Image) 容器(Container) 仏库(Repository) 理解了返三个概念,就理解了 Docker 的整个生命周期. Docker 镜像 Docke ...
- STL --> set用法
set用法 一.set和multiset基础 set和multiset会根据特定的排序准则,自动将元素进行排序.不同的是后者允许元素重复而前者不允许. 需要包含头文件: #include <se ...
- C++迭代器的使用和操作总结
迭代器是一种检查容器内元素并遍历元素的数据类型.C++更趋向于使用迭代器而不是下标操作,因为标准库为每一种标准容器(如vector)定义了一种迭代器类型,而只用少数容器(如vector)支持下标操作访 ...
- 浅谈-RMQ
浅谈RMQ Today,我get到了一个新算法,开心....RMQ. 今天主要说一下RMQ里的ST算法(Sparse Table). RMQ(Range Minimum/Maximum Query), ...
- The Beginning of the Graph Theory
The Beginning of the Graph Theory 是的,这不是一道题.最近数论刷的实在是太多了,我要开始我的图论与树的假期生活了. 祝愿我吧??!ShuraK...... poj18 ...
- Jmeter中正则表达式提取器使用详解
在使用Jmeter过程中,会经常使用到正则表达式提取器提取器,虽然并不直接涉及到请求的测试,但是对于数据的传递起着很大的作用,本篇博文就是主要讲解关于正则表达式及其在Jmeter的Sampler中的调 ...
- 升级 mysql5.6 配置文件my.cnf sql_mode 解析与设置问题
sql_mode是个很容易被忽视的变量,默认值是空值,在这种设置下是可以允许一些非法操作的,比如允许一些非法数据的插入.在生产环境必须将这个值设置为严格模式,所以开发.测试环境的数据库也必须要设置,这 ...