<!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. spring @Component

    使用 @Component <context:component-scan base-package="dao" />   虽 然我们可以通过@Autowired或@R ...

  2. Cookie 的设置和获取

    获取:var userName = getCookieValue("userName"); 设置:setCookie("userName",equpid,24, ...

  3. PHP上传图片三个步骤详细分析

    学习PHP时,你可能会遇到PHP上传图片问题,这里将介绍PHP上传图片问题的解决方法,在这里拿出来和大家分享一下.今天我们就开始一起学习PHP上传图片.上传图片原理:首先判断文件类型是否为图片格式,若 ...

  4. wifi 3G 流量

    // //  flowStatis.c //  Test // //  Created by iXcoder on 12-7-19. //  Copyright (c) 2012年 iXcoder. ...

  5. Java传参

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

  6. acm课程练习2--1003

    题目描述 My birthday is coming up and traditionally I'm serving pie. Not just one pie, no, I have a numb ...

  7. unity 创建NGUI字体

    1.NGUI -> Open -> Font Maker 打开FoontMaker窗口. 2.点Source选择.ttf字体,必须是中文命令,否则会出错. 3.点Custom单选按钮,输入 ...

  8. AngularJS 基础用法

    判断语句: <li ng-repeat=”person in persons”> <span ng-switch on=”person.sex”> <span ng-sw ...

  9. hdu_3886_Final Kichiku “Lanlanshu”(数位DP)

    题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=3886 题意:这题的题意有点晦涩难懂,大概意思就是给你一个区间,让你找一些满足递增递减条件的数,举个列: ...

  10. Android消息提示框Toast

    Android消息提示框Toast Toast是Android中一种简易的消息提示框.和Dialog不一样的是,Toast是没有焦点的,toast提示框不能被用户点击,而且Toast显示的时间有限,t ...