Javascript Fromdata 与jQuery 实现Ajax文件上传
<!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文件上传的更多相关文章
- Javascript Fromdata 与jQuery 实现Ajax文件上传以及文件的删除
前端HTML代码: <!DOCTYPE html> <html> <head> <title>ajax</title> <script ...
- 转: 如何实现jQuery的Ajax文件上传
[PHP文件上传] 在开始之前,我觉得是有必要把通WEB上传文件的原理简单说一下的.实际上,在这里不管是PHP,JSP,还是ASP处理上传的文件,其实都是WEB早已把文件上传到服务器了,我们只是运用上 ...
- 兼容ie的jquery ajax文件上传
Ajax文件上传插件很多,但兼容性各不一样,许多是对ie不兼容的,另外项目中是要求将网页内容嵌入到桌面端应用的,这样就不允许带flash的上传插件了,如:jquery uploadify...悲剧 对 ...
- jQuery插件AjaxFileUpload实现ajax文件上传
转自:http://www.cnblogs.com/linjiqin/p/3530848.html jQuery插件AjaxFileUpload用来实现ajax文件上传,该插件使用非常简单,接下来写个 ...
- jQuery插件AjaxFileUpload文件上传实现Javascript多文件上传功能
Ajax file upload plugin是一个功能强大的文件上传jQuery插件,可自定义链接.或其它元素庖代传统的file表单上传结果,可实现Ajax动态提示文件上传 过程,同时支撑多文 ...
- jquery.form.js官方插件介绍Form插件，支持Ajax，支持Ajax文件上传
jquery.form.js官方插件介绍Form插件,支持Ajax,支持Ajax文件上传 http://www.malsup.com/jquery/form/#getting-started [JQu ...
- jQuery插件AjaxFileUpload实现ajax文件上传时老是运行error方法 问题原因
今天在用jQuery插件AjaxFileUpload实现ajax文件上传时,遇到一个问题,如图: 老是运行error.无法运行succes方法,追踪ajaxfileupload.js源代码发现: wa ...
- [代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传
原文 [代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传 Fine Uploader(http://fineuploader.com/)是一个实现 ajax 上传文件 ...
- jquery组件WebUploader文件上传用法详解
这篇文章主要为大家详细介绍了jquery组件WebUploader文件上传用法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 WebUploader是由Baidu WebFE(FEX)团队开发的一 ...
随机推荐
- 'customerService' for bean class [com.cd.service.business.customer.impl.CustomerService]
'customerService' for bean class [com.cd.service.business.customer.impl.CustomerService] 此处报错是因为我 把一 ...
- TexturePacker license Key免费获取方式
TexturePacker是一款功能非常强大的图片制作工具.是一款付费软件,但是TexturePacker的作者Andreas Löw先生也给出获得免费key 的方法...大家可以到这个网站去申请 h ...
- Too Much Money
Too Much Money time limit per test 2 seconds memory limit per test 256 megabytes input standard inpu ...
- php moungoDB
moungoDB 语法 SQL查询语句 Mongo查询语句 CREATE TABLE USERS (a Number, b Number) 隐式的创建,或 MongoDB::createCollect ...
- ACE_Get_Opt解析命令行
ACE_Get_Opt是一种解析命令行参数选项的迭代器. 1:构造方法 ACE_Get_Opt需要引用头文件,#include "ace/Get_Opt.h". ACE_Get_O ...
- [转]java static final 初始化
http://tanbing1986411.blog.163.com/blog/static/7259798220103610224434/ java static final 初始化 1.stati ...
- display：block;inline;inline-block大总结
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- UVALive 4031 Integer Transmission（贪心 + DP）
分析:求出最大值和最小值比较简单,使用贪心法,求最小值的时候我们让所有的0尽可能的向后延迟就可以了,求最大值则相反. 关键在于求出可以组合出的数字个数. 这就是组合数学版的dp了,我们让dp[i][j ...
- 4--OC --合成存取器方法
1. 从OC 2.0开始就已经可以自动生成设置函数方法和获取函数方法(统称为存取器方法). 什么是 @property 和 @synthesize ? @property 和 @synthesize ...
- 河南多校联合训练 F 不是匹配
描述 有N个人,N个活动, 每个人只会对2个或者3个活动感兴趣, 每个活动也只有两个人或者两个活动对它兴趣,每个人参加一个 感兴趣的活动需要一天 ,且当天该活动被参加时,其他的人不能参加 如果 ...