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)团队开发的一 ...
随机推荐
- LightOJ 1030 Discovering Gold 数学期望计算
题目大意:给出长度为n的一条隧道,每个位置都有一定数量的财宝.给你一枚骰子,roll到几点就前进几步,如果即将到达的地方超过了这条隧道长度,就重新roll一次,走到n点结束.求这个过程能收获多少财宝. ...
- IIS访问PHP文件时，弹出用户名和密码提示框的解决方法
找了一圈,以下的方法解决了IIS访问PHP弹用户名和密码提示框问题. 解决方法:给PHP安装目录everyone读取权限 这样不知道会不会出现安全问题,请大家谨慎.
- 青蛙的约会<数论，extgcd>
青蛙的约会 题意: 在一个圆上有一个零刻度点,公青蛙和母青蛙分别在A点和B点<不同的位 置>,他们每秒行走的距离分别是m和n,圆的周长是L.问题是这两个青 蛙能不能相遇,若能在什么时候相遇 ...
- Linux 监控文件事件
某些应用程序需要对文件或者目录进行监控,来侦测其是否发生了某些事件.Linux很贴心的为我们提供了inotify API,也是Linux的专有. inotify API 在使用之前一定要有一个inot ...
- aspx基础开始
<%@ Page Language="C#" Debug="true" trace="false" validateRequest=& ...
- location对象的属性和方法应用(解析URL)
本文将与大家分享下location对象使用属性和方法来解析URL的实例,感兴趣的朋友可以参考下,希望对你有所帮助 location对象提供了很多属性和方法用来解析URL. 复制代码代码如下: &l ...
- JavaScript数组函数unshift、shift、pop、push使用实例
如何声明数组 s中数组的声明可以有几种方式声明 复制代码代码如下: var tmp = []; // 简写模式var tmp = new Array(); // 直接new一个var tmp = A ...
- 帝国cms文章内容tags关键词设置调用方法以及tags静态化
说实话帝国cms用起来真的不好找一些功能,就比如说帝国cms的tag标签调用.需要注意的是帝国CMS文章的关键词和tags标签并非一码事,关键词标签是设置文章的关键词的,是用来给搜索引擎说明本篇文章的 ...
- zepto为什么不支持animate,报animate is not a function
在zepto.min.js文件中搜索animate看有没有,如果没有就是没有加入animate的模块 解决办法,去github中打开src/文件夹,找到fx.js文件,把内容追加到zepto.min. ...
- ubuntu ssh重启
SSH分客户端openssh-client和openssh-server 如果你只是想登陆别的机器的SSH只需要安装openssh-client(ubuntu有默认安装,如果没有则sudo apt-g ...