使用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. 51nod 1070 Bash游戏 V4 (斐波那契博弈)

    题目:传送门. 有一堆个数为n(n>=2)的石子,游戏双方轮流取石子,规则如下: 1)先手不能在第一次把所有的石子取完,至少取1颗: 2)之后每次可以取的石子数至少为1,至多为对手刚取的石子数的 ...

  2. ajax基础语法、ajax做登录、ajax做用户名验证是否可用、ajax做关键字查询动态显示、ajax做用表格显示数据并增加操作列

    AJAX: AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新.   ...

  3. yii 多表联合查询的几种方法

    yii多表联合查询, 第一种,用command,自己拼接sql语句执行查询 第二种,用AR,model需继承下面的ar,执行queryall或queryrow方法 <?php //applica ...

  4. W3C对DOM2.0定义的标准事件

    DOM2.0模型将事件处理流程分为三个阶段: 一.事件捕获阶段, 二.事件目标阶段, 三.事件起泡阶段. 具体如图(图片来源于网络,侵删) 事件捕获:当某个元素触发某个事件(如onclick),顶层对 ...

  5. REORG TABLESPACE on z/os

    这个困扰了我两天的问题终于解决了,在运行这个job时:总是提示 A REQUIRED DD CARD OR TEMPLATE IS MISSING NAME=SYSDISC A REQUIRED DD ...

  6. React之JSX入门

    React是由ReactJS与React Native组成,其中ReactJS是Facebook开源的一个前端框架,React Native 是ReactJS思想在native上的体现! JSX并不是 ...

  7. CLR via C#（01）-.NET平台下代码是怎么跑起来的

    1. 源代码编译为托管模块 程序在.NET框架下运行,首先要将源代码编译为托管模块.CLR是一个可以被多种语言所使用的运行时,它的很多特性可以用于所有面向它的开发语言.微软开发了多种语言的编译器,编译 ...

  8. C语言中do...while(0)的妙用

    在linux内核代码中,经常看到do...while(0)的宏,do...while(0)有很多作用,下面举出几个: 1.避免goto语句: 通常,如果一个函数开始要分配一些资源,然后如果在中途遇到错 ...

  9. 设计模式学习之中介者模式（Mediator，行为型模式）（18）

    转载地址:http://www.cnblogs.com/zhili/p/MediatorPattern.html 一.引言 在现实生活中,有很多中介者模式的身影,例如QQ游戏平台,聊天室.QQ群和短信 ...

  10. DDD的思考

    概述 DDD领域驱动设计,它是对面向对象的的分析和设计(OOAD,Object Orient Analysis Design)的一个补充,对技术框架进行了分层规划,同时对每个类进行了策略和类型划分.领 ...