<!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. URL的# (转)

    http://www.ruanyifeng.com/blog/2011/03/url_hash.html

  2. 【转】哦，mysql 的其它发行版本Percona， mariadb

    原文:http://geek.csdn.net/news/detail/130146 2016年11月25日,沃趣科技"智慧应用 数据先行"2016产品发布会暨新三板挂牌庆祝会在杭 ...

  3. CodeForces 719A Vitya in the Countryside 思维题

    题目大意:月亮从0到15,15下面是0.循环往复.给出n个数字,如果下一个数字大于第n个数字输出UP,小于输出DOWN,无法确定输出-1. 题目思路:给出0则一定是UP,给出15一定是DOWN,给出其 ...

  4. FZU 2113 BCD Code 数位dp

    数位dp,但是很奇怪的是我在虚拟oj上用GUC C++提交会wa,用Visual c++提交正确,但是加上注释后提交又莫名CE--好任性啊 0 ,0 题目思路:看代码吧 注释很详细 #include& ...

  5. VJ16216/RMQ/线段树单点更新

    题目链接 /* 单点更新,用RMQ维护最大值,add对c[i]修改,或加,或减. 求[l,r]的和,用sum(r)-sum(l-1).即可. */ #include<cmath> #inc ...

  6. HALF<水题>

    题意: 找出n/d=0.5的所有数.输入:test,x(代表n的位数,1<=x<=4).并且n和d的每一个位数不能有重复,也不能是0. 输入: 1 1 输出: the form 1/2 = ...

  7. mysql Group By

    1.概述 “Group By”从字面意义上理解就是根据“By”指定的规则对数据进行分组,所谓的分组就是将一个“数据集”划分成若干个“小区域”,然后针对若干个“小区域”进行数据处理. 2.原始表 3.简 ...

  8. linux进程、管道和重定向

    1.shell先后使用fork和exec系统调用来执行一个外部命令. 2.在linux系统中,有三个文件会被内核自动打开,分别是stdin.stdout.stderr. 3.进程的属性相关命令: 查看 ...

  9. Git学习 -- 新建版本库

    创建目录 mkdir git cd git 2 初始化git init #会在目录下自动创建一个.git目录,用于跟踪管理版本库,不要修改 3 向版本库中添加文件git add readme.txt ...

  10. 编程实现prim算法和Dijkstra算法。

    网址链接:http://blog.csdn.net/anialy/article/details/7603170