<!DOCTYPE html>

<html>

<head>

	<title>ajax</title>

	<script type="text/javascript" src="js/jquery.js"></script>

	<meta charset="utf-8" />

	<style type="text/css">

	form{

		position: relative;

	}

	ul li{

		list-style: none;

	}

	.divide ul li img{

		width: 100px;

		border: 3px solid #eeeeee;

	}

	.selected{

		border: 3px solid #0099aa;

	}

	form input{

		position: absolute;

		top: 0;

		left: 0;

		padding: 20px;

		opacity: 0;

	}

	button{

		padding: 20px;

		background: #0099aa;

		border-radius: 3px;

		border: 2px solid #333333;

		color: #ffffff;

		font-size: 18px;

	}

	.loading{

		display: none;

	}

	</style>

</head>

<body>

	<input type="file" id="file" multiple />

	<div class="loading"><img src="loading.gif" /></div>

	<div class="divide">

		<ul>

		</ul>

	</div>

	<script type="text/javascript">

	$(function(){

		$("#file").change(function(){

				data = new FormData();

				data.append('files', $('#file')[0].files[0]);

				$.ajax({

					type: "post",

					url: "upload.php",

					processData: false,

					contentType: false,

					data: data,

					success: function(a, b, c){

						$("div ul").append("文件上传成功！<li><img src='" + a + "' /> </li>");

					}

				});

			});

	});

	</script>

</body>

</html>

　　

Javascript Fromdata 与jQuery 实现Ajax文件上传的更多相关文章

  1. Javascript Fromdata 与jQuery 实现Ajax文件上传以及文件的删除

    前端HTML代码: <!DOCTYPE html> <html> <head> <title>ajax</title> <script ...

  2. 转: 如何实现jQuery的Ajax文件上传

    [PHP文件上传] 在开始之前,我觉得是有必要把通WEB上传文件的原理简单说一下的.实际上,在这里不管是PHP,JSP,还是ASP处理上传的文件,其实都是WEB早已把文件上传到服务器了,我们只是运用上 ...

  3. 兼容ie的jquery ajax文件上传

    Ajax文件上传插件很多,但兼容性各不一样,许多是对ie不兼容的,另外项目中是要求将网页内容嵌入到桌面端应用的,这样就不允许带flash的上传插件了,如:jquery uploadify...悲剧 对 ...

  4. jQuery插件AjaxFileUpload实现ajax文件上传

    转自:http://www.cnblogs.com/linjiqin/p/3530848.html jQuery插件AjaxFileUpload用来实现ajax文件上传,该插件使用非常简单,接下来写个 ...

  5. jQuery插件AjaxFileUpload文件上传实现Javascript多文件上传功能

     Ajax file upload plugin是一个功能强大的文件上传jQuery插件,可自定义链接.或其它元素庖代传统的file表单上传结果,可实现Ajax动态提示文件上传 过程,同时支撑多文 ...

  6. jquery.form.js官方插件介绍Form插件，支持Ajax，支持Ajax文件上传

    jquery.form.js官方插件介绍Form插件,支持Ajax,支持Ajax文件上传 http://www.malsup.com/jquery/form/#getting-started [JQu ...

  7. jQuery插件AjaxFileUpload实现ajax文件上传时老是运行error方法 问题原因

    今天在用jQuery插件AjaxFileUpload实现ajax文件上传时,遇到一个问题,如图: 老是运行error.无法运行succes方法,追踪ajaxfileupload.js源代码发现: wa ...

  8. [代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传

    原文 [代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传 Fine Uploader(http://fineuploader.com/)是一个实现 ajax 上传文件 ...

  9. jquery组件WebUploader文件上传用法详解

    这篇文章主要为大家详细介绍了jquery组件WebUploader文件上传用法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 WebUploader是由Baidu WebFE(FEX)团队开发的一 ...

随机推荐

  1. Java学习笔记之多态

    1.父类型的引用可以指向子类型的对象: Parent p = new Child(); 2.当使用多态方式调用方法时,首先检查父类中是否有该方法,如果没有,则编译错误:如果有,再去调用子类的该同名方法 ...

  2. java.sql.ResultSet技术（从数据库查询出的结果集里取列值）

    里面有一个方法可以在查询的结果集里取出列值,同理,存储过程执行之后返回的结果集也是可以取到的. 如图: 然后再运用 java.util.Hashtable 技术.把取到的值放入(K,V)的V键值里,K ...

  3. 转 sort按照数据大小排序

    一般默认的sort都是按照字母的ASCII进行排序的,现在想按照数字的大小进行排序 这里有一个文件test,内容为: 8723    23423 321324  213432 23      234 ...

  4. echarts学习总结（二）：一个页面存在多个echarts图形，图形自适应窗口大小

    如上图所示一个页面有两个echarts图形:散点图和折线图,如果还写为: myChart.setOption(option); window.onresize = myChart.resize; 则只 ...

  5. CSS position 属性

    position: relative | absolute | static | fixed 参考网站:http://blog.csdn.net/dyllove98/article/details/8 ...

  6. HDOJ3743<分治>

    题意:求一个排列的逆序数. #include<cstdio> #include<iostream> #include<algorithm> const int ma ...

  7. RACSignal的Subscription深入

    ReactiveCocoa是一个FRP的思想在Objective-C中的实现框架,目前在美团的项目中被广泛使用.对于ReactiveCocoa的基本用法,网上有很多相关的资料,本文不再讨论.RACSi ...

  8. partial 函数

    函数的partial应用 函数在执行时,要带上所有必要的参数进行调用.但是,有时参数可以在函数被调用之前提前获知.这种情况下,一个函数有一个或多个参数预先就能用上,以便函数能用更少的参数进行调用. 例 ...

  9. [转]Java初始化顺序总结 - 静态变量、静态代码块、成员变量、构造函数

    Java初始化顺序1在new B一个实例时首先要进行类的装载.(类只有在使用New调用创建的时候才会被java类装载器装入)2,在装载类时,先装载父类A,再装载子类B3,装载父类A后,完成静态动作(包 ...

  10. 优化のzencart URL &zenid=.....

    zencart URL后面带有一串&zenid=.....解决方案 发布时间:2013年3月16日 次浏览:106 经木木测试,此方法可用. ================= 最近一个客户的 ...