<!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. table详解

    1.tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元. tr内是th还是td可由自己定义,th,td可存在于任一行,th与td的区别在与th字体更粗 2.定义一个table默认有bor ...

  2. 优化eclipse

    1.取消自动validation windows–>perferences–>validation 除开Manual下面的复选框全部选中之外,其他全部不选 如需验证,在要验证的文件上,单击 ...

  3. Skewed Sorting

    Description Farmer John has 2^N (1 <= N <= 10) cows, each conveniently labeled with paint on h ...

  4. 文本格式ANSI,Unicode等有什么区别

    首先DBCS是亚洲的字符集,包含了ANSI,ANSI也就是ASCII值为0-255之间的字符,当字符为ANSI时,存放于文件中占用的是一个字节.如果是非ANSI的呢,则占用两字节.用VB的ASC函数可 ...

  5. openURL in APP Extension

    var responder = self as UIResponder? while (responder != nil){ if responder!.respondsToSelector(Sele ...

  6. NSAttributedString 的21种属性 详解

    原文链接:http://www.jianshu.com/p/09f54730feaa 先看看所有的Key NSFontAttributeName; //字体,value是UIFont对象 NSPara ...

  7. hdu1501 Zipper

    Zipper Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 65536/32768K (Java/Other) Total Submis ...

  8. 8--UI 初步认识 简易计算器

    UI是App的根基:一个App应该是先有UI界面,然后在UI的基础上增加实用功能(2)UI相对简单易学:UI普遍是学习过程中最简单的一块,能快速拥有成就感和学习兴趣(3)UI至关重要:开发中的绝大部分 ...

  9. String Stringbuilder Stringbuffer的区别

    String 字符串常量StringBuffer 字符串变量(线程安全)StringBuilder 字符串变量(非线程安全) 简要的说, String 类型和 StringBuffer 类型的主要性能 ...

  10. C#无边框窗体移动 将事件绑定到想实现的控件上

    [DllImport("user32.dll")] public static extern bool ReleaseCapture(); [DllImport("use ...