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)团队开发的一 ...
随机推荐
- MyBatis-配置缓存
<cache type="org.mybatis.caches.ehcache.LoggingEhcache"> <property name="tim ...
- ant 配置 和测试 1
配置路径 D:\dba\change\UAT\unity\schema\test ----v0 版本 sql.xml (默认target 是versionfinal ,也就是最终版本) --ver ...
- ANT 操控 ORACLE数据库实践
Ant 执行系统命令没有任何问题,这次实际系统命令中可以说遇到了两个问题,一个是启动服务的命令是含有空格的,第二个如何备份数据库可以自动加上日期. 首先,我们启动oracle数据库,操作有两个: 1. ...
- php秒杀
我们知道数据库处理sql是一条条处理的,假设购买商品的流程是这样的: sql1:查询商品库存 ? 1 2 3 4 5 if(库存数量 > 0) { //生成订单... sql2:库存-1 ...
- 查看log的方法
adb logcat>1.txt adb shell cat /proc/atf_log/atf_log > atf_log 会保存在adb的本地文件. 还有一种是实时读取的方式: adb ...
- Android----->多线程的实现Thread、IntentService的运用
首先建立一个Intent.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout x ...
- UVALive 2053 Puzzlestan（深搜+技巧）
这个题目的深搜形式,我也找出来了,dfs(i,j)表示第i个人选到了第j个物品,但是我却无限RE了,原因是我的viod型深搜太过暴力,我当时定义了一个计数器,来记录并限制递归的层数,发现它已经递归到了 ...
- android平台菜单返回键监听
//声明 void onKeyReleased(EventKeyboard::KeyCode keyCode, Event* event); //实现 //按键控制(检测onKeyReleased有反 ...
- AndroidGradle --多渠道打包配置(转发)
需求 国内Android app发布一般会有多个渠道,为了跟踪发展情况,通常会为每一个渠道定制一个特别的apk. 一般友盟之类第三方统计的渠道ID定义如下,以wandoujia为例 <meta- ...
- MFC的核心概念
API是英文Application Programming Interface 的缩写,意思是“应用程序接口”,泛指系统为应用程序提供的一系列函数接口,在编程时可以直接调用,而不必知道其内部实现的过程 ...