<!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. Gym 100917L Liesbeth and the String 规律&&胡搞

    题目: Description standard input/outputStatements Little Liesbeth likes to play with strings. Initiall ...

  2. 最短路径问题/Spfa

    题目链接 题目描述 给你n个点,m条无向边,每条边都有长度d和花费p,给你起点s终点t,要求输出起点到终点的最短距离及其花费,如果最短距离有多条路线, 则输出花费最少的. 最后一行是两个数 s,t;起 ...

  3. Java传参

    1.  如果参数是基本数据类型(int.long等),传值.方法内部改变参数值,外部值不变. 2.  如果参数是对象类型,传地址.方法内部改变对象值,外部对象值改变.但是,如果方法内部调用new重新构 ...

  4. POJ 2084 Game of Connections（卡特兰数）

    卡特兰数源于组合数学,ACM中比较具体的使用例子有,1括号匹配的种数.2在栈中的自然数出栈的种数.3求多边形内三角形的个数.4,n个数围城圆圈,找不相交线段的个数.5给定n个数,求组成二叉树的种数…… ...

  5. HDU 1681 Frobenius（完全背包+标记装满）

    一个完全背包,数组两百万,暴力可过 #include<iostream> #include<cstdio> #include<cstring> using name ...

  6. 学习笔记——状态模式State

    状态模式,主要是用于存在大量case判断的操作执行,同时这些case依赖于对象的状态,那么就可以将大量的case判断封装为独立的类. Context: -state,当前状态对象. ChangeSta ...

  7. ARP/代理ARP

    1.ARP首先讲到ARP,ARP是地址解析协议,它的作用是在以太网环境下,通过3层的IP地址来找寻2层的MAC地址,得到一张ARP缓存表.转发数据的时候根据ARP缓存表来进行传输.下图详细说明数据传输 ...

  8. 转：Loadrunner学习知多少--脚本录制下载操作

    在很多时候我们可能需要对系统进行这样的脚本开发,模拟用户点击一个下载链接,然后弹出下载框,选择保存,用来测试在大量用户下载时服务器的性能.但是现在大家对于这种脚本的处理方式往往是通过关联和C 语言的文 ...

  9. linux下的vim使用笔记

    环境:window下可以使用gvim编辑软件 学习主要是在ubuntu15敲击命令学习的视频来自于智普教育vim使用视频1. sudo apt show vi 查看安装的vi版本,当然了我的ubunt ...

  10. “inno setup打包，win7下安装没有桌面快捷方式，xp下安装正常”

    修改桌面的快捷键为选中就行了:Flags: checkablealone;在[Tasks]下面修改代码如下:Name: "desktopicon"; Description: &q ...