ajax 上传
使用FormData,进行Ajax请求并上传文件;具体代码如下:
html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="./jquery-1.11.0.min.js" ></script>
<title>测试</title>
</head>
<body> <button id="uploadAll">上传</button> <br><br>
<form id= "uploadForm">
<input type="file" name="uploadData" style="display:none" id="uploadimg" onchange="uploadFile()" /> <br>
<input type="hidden" name="data-id" style="display:none" id="offerid" value="" /> <br>
</form> </body>
</html>
js代码:
<script> $("#uploadAll").on("click", function(){
// alert("上传");
$("#uploadimg").click();
});
function uploadFile()
{
var formData = new FormData($( "#uploadForm" )[0]);
$.ajax({
url: "./uploadAll.php",
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function (returndata) {
// alert(returndata); return false;
if ( returndata=="上传成功!") {
alert("上传成功!");return true;
};
alert(returndata);return false;
},
error: function (returndata) {
alert(returndata);
}
});
} </script>
php代码:
<?php
// 获取上传文件的信息
// print_r($_FILES["uploadData"]);die();
if(is_uploaded_file($_FILES['uploadData']['tmp_name'])){
$upFile = $_FILES["uploadData"]; // 获取数组里面的值
$name = $upFile["name"]; // 上传文件的文件名
$type = $upFile["type"]; // 上传文件的类型
$size = $upFile["size"]; // 上传文件的大小
$tmp_name = $upFile["tmp_name"]; // 上传文件的临时存放路径
//判断是否为图片
switch ($type){
case 'image/pjpeg': $okType=true;break;
case 'image/jpeg': $okType=true;break;
case 'image/gif': $okType=true;break;
case 'image/png': $okType=true;break;
}
if($okType){
/**
* 0:文件上传成功<br/>
* 1:超过了文件大小,在php.ini文件中设置<br/>
* 2:超过了文件的大小MAX_FILE_SIZE选项指定的值<br/>
* 3:文件只有部分被上传<br/>
* 4:没有文件被上传<br/>
* 5:上传文件大小为0
*/
$error=$upFile["error"];// 上传后系统返回的值
//把上传的临时文件移动到upload目录下面
move_uploaded_file( $tmp_name,"./upload/".$name );
if($error==0){
echo "上传成功!";
}elseif ($error==1){
echo "超过了文件大小,在php.ini文件中设置";
}elseif ($error==2){
echo "超过了文件的大小MAX_FILE_SIZE选项指定的值";
}elseif ($error==3){
echo "文件只有部分被上传";
}elseif ($error==4){
echo "没有文件被上传";
}else{
echo "上传文件大小为0";
}
}else{
echo "请上传jpg,gif,png等格式的图片!";
}
}else{
echo "您没有上传任何东西!";
}
?>
ajax 上传的更多相关文章
- IE8/9 JQuery.Ajax 上传文件无效
IE8/9 JQuery.Ajax 上传文件有两个限制: 使用 JQuery.Ajax 无法上传文件(因为无法使用 FormData,FormData 是 HTML5 的一个特性,IE8/9 不支持) ...
- asp.net MVC ajax上传文件
普通上传 view: <body> <form id="form1" method="post" action="@Url.Acti ...
- springMVC+jsp+ajax上传文件
工作中遇到的小问题,做个笔记 实现springMVC + jsp + ajax 上传文件 HTML <body> <form id="myform" method ...
- FormData对象实现文件Ajax上传
后台: import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; imp ...
- 基于HTML5的可预览多图片Ajax上传
一.关于图片上传什么什么的 在XHTML的时代,我们使用HTML file控件上传图片一次只能上传一张.要一次上传多图,做法是借助于flash.例如swfupload.js.可惜,使用复杂的点,比如f ...
- Ajax上传文件进度条显示
要实现进度条的显示,就要知道两个参数,上传的大小和总文件的大小 html5提供了一个上传过程事件,在上传过程中不断触发,然后用已上传的大 小/总大小,计算上传的百分比,然后用这个百分比控制div框的显 ...
- java Springmvc ajax上传
ajax上传方式相对于普通的form上传方式要便捷,在更多的时候都会使用ajax (简单的小示例) 1.要先去下载一个 jquery.ajaxfileupload.js(基于jquery.js上的js ...
- 基于HTML5和JSP实现的图片Ajax上传和预览
本文对如何实现使用Ajax提交"multipart/form"格式的表单数据,已经如何在图片上传之前,在浏览器上进行预览.使用的主要相关技术HTML5的FILE API,XMLHt ...
- 利用jquery+iframe做一个ajax上传效果
以下是自学it网--中级班上课笔记 网址:www.zixue.it html页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict ...
- 伪ajax上传文件
伪ajax上传文件 最近在折腾伪ajax异步上传文件. 网上搜索了一下,发现大部分方法的input file控件都局限于form中,如果是在form外的呢? 必须动态生成一个临时form和临时if ...
随机推荐
- C#Winform从页面获取数据,传入数据库
环境: 1.SQLite数据库新建数据表,设置相应的字段.(其他数据库形式都相似,using相应数据库的包即可) 2.页面有两个textBox:textBox1.textBox2, 3.一个保存按钮: ...
- 【NOIP模拟题】【二分】【倍增】【链表】【树规】
3 计算几何3.1 题意描述花花对计算几何有着浓厚的兴趣.他经常对着平面直角坐标系发呆,思考一些有趣的问题.今天,他想到了一个十分有意思的题目:首先,花花会在x 轴正半轴和y 轴正半轴分别挑选n 个点 ...
- jpcap
1.System.out.println( System.getProperty("java.library.path")); 2.将jpcap.dll放到上边打印的路径中
- 登陆中session的处理
在学校中的登陆注册使用的普通session存储信息,然后就是根据session中获取user是否拥有来判断是否登陆. 在一次面试中别人问到了我你们项目的登陆session是怎么一个情况,我这样答的话那 ...
- 关于Mapper、Reducer的个人总结(转)
Mapper的处理过程: 1.1. InputFormat 产生 InputSplit,并且调用RecordReader将这些逻辑单元(InputSplit)转化为map task的输入.其中Inpu ...
- Integer 和int
获取Integer对象有两种方式:Integer x = 100:或者Integer x = new Integer(100): Integer x = 100:等价于Integer x = Inte ...
- 【python练习】截取网页里最新的新闻
需求: 在下面这个网页,抓取最新的新闻,按天划分. http://blog.eastmoney.com/13102551638/bloglist_0_1.html 实现方法1:使用递归 import ...
- PHP四舍五入精确小数位及取整
php中取小数位的函数有sprintf,ceil,floor,round等等函数来实现四舍五入,下面我们就一起来看看具体的实例吧. 本篇文章将使用php对数字进行四舍五入保留N位小数,以及使用 ...
- Objective-C中NSValue的使用
我们在C/C++开发中常会用到结构体来帮助我们简单封装基本数据类型,在Objective-C中我们也可以使用结构体来完成数据类型的封装.同时,Cocoa Touch还提供了一个NSValue来帮助我们 ...
- jsp MVC学习笔记
Model层: 四个包: com.maker.bean存放数据库里面的字段信息. package com.maker.bean; public class User { private String ...