/*图片上传*/
$("点击对象").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的更多相关文章

  1. laravel 图片上传 ajax 方式

    laravel 图片上传 //后台轮播图上传 $("#img-upload").on('submit',function(e){ e.preventDefault(); var f ...

  2. js formData图片上传(单图上传、多图上传)后台java

    单图上传 <div class="imgUp">     <label>头像单图</label>     <input type=&quo ...

  3. JS兼容各个浏览器的本地图片上传即时预览效果\、

    在firefox\chrome\ie10等浏览器中可以使用HTML5中的内容实现图片即时预览效果,在IE10以下浏览器中使用滤镜来解决图片显示问题. HTML5中的FileReader对象主要是把文件 ...

  4. 项目回顾3-再谈图片上传-FormData+ajax上传

    上次在纠结图片上传用base64还是form表单,现在感觉好蠢,因为又开辟了第三条道路. 其实也根本用不到form 只需要一个上传文件的input就好了 <input id="file ...

  5. ssm使用Ajax的formData进行异步图片上传返回图片路径,并限制格式和大小

    之前整理过SSM的文件上传,这次直接用代码了. 前台页面和js //form表单 <form id= "uploadForm" enctype="multipart ...

  6. 一个伪ajax图片上传代码的例子

    一个伪ajax图片上传实现代码. 复制代码代码如下: <?php  if($_FILES){  ?>  <script>  window.parent.ajaxUploadPi ...

  7. 在 PHP 中结合 Ajax 技术进行图片上传

    前面几则日志中讲述了在 PHP 中上传文件,相信大家对 PHP 中如何进行文件上传已经初步掌握.本文来继续探讨在 PHP 中上传文件的技术,不同的是,本次上传将仅限于图片文件的上传,并且将采用 Aja ...

  8. 基于“formData批量上传的多种实现” 的多图片预览、上传的多种实现

    前言 图片上传是web项目常见的需求,我基于之前的博客的代码(请戳:formData批量上传的多种实现)里的第三种方法实现多图片的预览.上传,并且支持三种方式添加图片到上传列表:选择图片.复制粘贴图片 ...

  9. ASP.NET Core 简单实现七牛图片上传(FormData 和 Base64)

    ASP.NET Core 简单实现七牛图片上传(FormData 和 Base64) 七牛图片上传 SDK(.NET 版本):https://developer.qiniu.com/kodo/sdk/ ...

随机推荐

  1. Java生成条码二维码

    一.概述 可用barcode4j或zxing等第三方库,推荐zxing. barcode4j资料链接:http://barcode4j.sourceforge.net/ zxing资料链接:https ...

  2. IP地址与域名的关系

    1.IP地址:IP地址是用来唯一标识互联网上计算机的逻辑地址,让电脑之间可以相互通信. 每台连网计算机都依靠IP地址来互相区分.相互联系 2.域名:由于IP地址是数字标识,使用时难以记忆和书写,因此在 ...

  3. 用于 SELECT 和 WHERE 子句的函数

    一个 SQL 语句中的 select_expression 或 where_definition 可由任何使用了下面所描述函数的表达式组成. 包含 NULL 的表达式总是得出一个 NULL 值结果,除 ...

  4. AvalonJS前端开发源码

    avBody = avalon.define("avBody", function (vm) { vm.Address = "";//地址 vm.BrandMo ...

  5. 集合中存的是引用,分析一道容易混淆的Java面试题

    我们自定义的类是以引用的形式放入集合,如果使用不当,会引发非常隐蔽的错误.就拿我经常问到的一个面试题来说明这个知识点. 第一步,我们定义一个Car类型的类,其中只有一个int类型id属性. 第二步,创 ...

  6. [UWP]理解ControlTemplate中的VisualTransition

    1. 前言 VisualTransition是控件模板中的重要组成部分,无论是自定义控件或者修改控件样式都会接触到VisualTransition.明明这么重要,博客园上好像都没多少关于VisualT ...

  7. openstack中的环境准备

    openstack中环境准备基于Ubuntu系统 author:headsen chen   2017-10-13  11:51:50 个人原创,转载请注明作者,出处. 6 apt-get insta ...

  8. freemarker的classic_compatible设置,解决报空错误

    前段时间接触freemaker时,本来后端写各接口运行正常,但加入了模板后,频繁报空指针问题,整了许久,最后还是请教了别人解决了这个问题,现在记录下来,方便以后碰到了可以查阅. 错误样例如下: ERR ...

  9. 笔记:Maven 仓库及配置详解

    本地创建默认路径在 用户目录\.m2\repository,如果需要自定义本地创建目录地址,可以编辑文件 用户目录\.m2\settings.xml(文件不存在,则需要从Maven安装目录的Conf目 ...

  10. 大数据 --> 大数据关键技术

    大数据关键技术 大数据环境下数据来源非常丰富且数据类型多样,存储和分析挖掘的数据量庞大,对数据展现的要求较高,并且很看重数据处理的高效性和可用性. 传统数据处理方法的不足 传统的数据采集来源单一,且存 ...