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)团队开发的一 ...
随机推荐
- Spring Boot 系列教程5-热部署-devtools模块
devtools模块 devtools模块,是为开发者服务的一个模块.主要的功能就是代码修改后一般在5秒之内就会自动重新加载至服务器,相当于restart成功. 原理 简单原理 在发现代码有更改之后, ...
- HDU1253--胜利大逃亡--HDU1240--Asteroids!--简单三维BFS
胜利大逃亡 Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Subm ...
- HDU1548:A strange lift
A strange lift Time Limit : 2000/1000ms (Java/Other) Memory Limit : 65536/32768K (Java/Other) Tota ...
- 转：loadruner报错:Step download timeout(120 seconds)的一个解决方法
一个网友问了我一个问题如下:loadruner报错:Error -27728: Step download timeout (120 seconds) 如何解决语法检查通过,但是在并发执行一个查询时候 ...
- CodeForces 678C Joty and Chocolate
简单题. #include<cstdio> #include<cstring> #include<cmath> #include<algorithm> ...
- Datatable.select() 方法的使用
文章为转载 ,原文地址 DataTable是我们在进行开发时经常用到的一个类,并且经常需要对DataTable中的数据进行筛选等操作,下面就介绍一下Datatable中经常用到的一个方法--Selec ...
- Ubuntu 14.04 待机死机问题原来是自己改了这个配置
使用专有驱动没问题.使用开源驱动就会死机.驱动还是厂商的好@@
- chromium blog
http://blog.chromium.org/
- filter by date in Sphinx
Indexing: include the date column in the sql_query of source. Also set the date as sql_attr_unit PHP ...
- zabbix Lack of free swap space
Zabbix初始设计是大型公司用于监控服务器集群的,但日常中也用于监控VPS或云主机.后者情况下Zabbix的很多配置和属性就没有经过优化,取决于监控的对象和用途,经常需要对一些Zabbix配置进行调 ...