使用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上传的更多相关文章

  1. IE8/9 JQuery.Ajax 上传文件无效

    IE8/9 JQuery.Ajax 上传文件有两个限制: 使用 JQuery.Ajax 无法上传文件(因为无法使用 FormData,FormData 是 HTML5 的一个特性,IE8/9 不支持) ...

  2. asp.net MVC ajax上传文件

    普通上传 view: <body> <form id="form1" method="post" action="@Url.Acti ...

  3. springMVC+jsp+ajax上传文件

    工作中遇到的小问题,做个笔记 实现springMVC + jsp + ajax 上传文件 HTML <body> <form id="myform" method ...

  4. FormData对象实现文件Ajax上传

    后台: import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; imp ...

  5. 基于HTML5的可预览多图片Ajax上传

    一.关于图片上传什么什么的 在XHTML的时代,我们使用HTML file控件上传图片一次只能上传一张.要一次上传多图,做法是借助于flash.例如swfupload.js.可惜,使用复杂的点,比如f ...

  6. Ajax上传文件进度条显示

    要实现进度条的显示,就要知道两个参数,上传的大小和总文件的大小 html5提供了一个上传过程事件,在上传过程中不断触发,然后用已上传的大 小/总大小,计算上传的百分比,然后用这个百分比控制div框的显 ...

  7. java Springmvc ajax上传

    ajax上传方式相对于普通的form上传方式要便捷,在更多的时候都会使用ajax (简单的小示例) 1.要先去下载一个 jquery.ajaxfileupload.js(基于jquery.js上的js ...

  8. 基于HTML5和JSP实现的图片Ajax上传和预览

    本文对如何实现使用Ajax提交"multipart/form"格式的表单数据,已经如何在图片上传之前,在浏览器上进行预览.使用的主要相关技术HTML5的FILE API,XMLHt ...

  9. 利用jquery+iframe做一个ajax上传效果

    以下是自学it网--中级班上课笔记 网址:www.zixue.it html页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict ...

  10. 伪ajax上传文件

    伪ajax上传文件   最近在折腾伪ajax异步上传文件. 网上搜索了一下,发现大部分方法的input file控件都局限于form中,如果是在form外的呢? 必须动态生成一个临时form和临时if ...

随机推荐

  1. PHP如何随机获取一个二维数组中的一个值

    获取一个数组: $awardid_list=pdo_fetchall('select id from '.tablename($this->table_award)); 这是微擎的写法哈,意思就 ...

  2. lazyload

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  3. swift枚举

    以下是指南针四个方向的一个例子:  enum CompassPoint { case North case South case East case West }   多个成员值可以出现在同一行上,用 ...

  4. [Android Pro] Android以root起一个process[shell脚本的方法]

    reference to :  http://***/Article/11768 有时候我们写的app要用uid=0的方式启动一个process,framework层和app层是做不到的,只有通过写脚 ...

  5. [Android Pro] 关于inputStream.available()方法获取文件的总大小

    reference to :http://hold-on.iteye.com/blog/1017449 如果用inputStream对象的available()方法获取流中可读取的数据大小,通常我们调 ...

  6. 最长公共上升子序列(codevs 2185)

    题目描述 Description 熊大妈的奶牛在小沐沐的熏陶下开始研究信息题目.小沐沐先让奶牛研究了最长上升子序列,再让他们研究了最长公共子序列,现在又让他们要研究最长公共上升子序列了. 小沐沐说,对 ...

  7. Ubuntu自定义服务

    1.准备脚本 准备好一个bash服务脚本,包括start|stop|restart等参数,将脚本文件命名为“服务名”,拷贝到/etc/init.d/目录下. 2.添加服务sudo update-rc. ...

  8. Swift - 状态栏颜色显示(字体、背景)

    ios上状态栏 就是指的最上面的20像素高的部分 状态栏分前后两部分,要分清这两个概念,后面会用到: 前景部分:就是指的显示电池.时间等部分: 背景部分:就是显示黑色或者图片的背景部分: 如下图:前景 ...

  9. 使用drozer连接时提示:Could not find java. Please ensure that it is installed and on your path

    在安装drozer后使用 drozer.bat console connect命令提示如下错误(实际上我已经安装了jdk并添加了path) 参考上面的链接已经它的提示解决方法如下: 建立名为 .dro ...

  10. C#的LINQ to Object

    using System; using System.Collections; using System.Collections.Generic; using System.IO; using Sys ...