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 "您没有上传任何东西!";
}

?>

时间: 2024-08-04 12:10:25

ajax 上传的相关文章

eclipse中导入jdk源码、SpringMVC注解@RequestParam、SpringMVC文件上传源码解析、ajax上传excel文件

eclipse中导入jdk源码:http://blog.csdn.net/evolly/article/details/18403321, http://www.codingwhy.com/view/799.html. ------------------------------- SpringMVC注解@RequestParam:http://825635381.iteye.com/blog/2196911. --------------------------- SpringMVC文件上传源

框架基础:关于ajax设计方案(三)---集成ajax上传技术

之前发布了ajax的通用解决方案,核心的ajax发布请求,以及集成了轮询.这次去外国网站逛逛,然后发现了ajax level2的上传文件,所以就有了把ajax的上传文件集成进去的想法,ajax方案的level2的改进就不介绍了,不清楚的可到前几篇博客去看看.我们直接切入主题. 概念介绍: 1. js的FormData:js中在新的版本中已经支持了FormData对象,可以初始化一个空的form,或者初始化已经存在的form,浏览器测试代码. 2. 浏览器的支持:浏览器已支持input=file的

框架基础:ajax设计方案(三)---集成ajax上传技术

之前发布了ajax的通用解决方案,核心的ajax发布请求,以及集成了轮询.这次去外国网站逛逛,然后发现了ajax level2的上传文件,所以就有了把ajax的上传文件集成进去的想法,ajax方案的level2的改进就不介绍了,不清楚的可到前几篇博客去看看.我们直接切入主题. 概念介绍: 1. js的FormData:js中在新的版本中已经支持了FormData对象,可以初始化一个空的form,或者初始化已经存在的form,浏览器测试代码. 2. 浏览器的支持:浏览器已支持input=file的

asp.net MVC ajax上传文件

普通上传 view: <body> <form id="form1" method="post" action="@Url.Action("UploadFile","Mydemo")" enctype="multipart/form-data"> <input type="file" name="file"/>

使用ajax上传文件

有时候我们需要在web端向服务器上传文件,以前是使用form的方式进行提交,html5中支持直接使用xmlhttprequest上传文件,send对象支持blob对象而文件就是一个blob对象 ajax上传文件 ajax中可以通过参数processData这个参数来控制data是否进行转换,我们将这个参数设置为false就可以使用ajax进行文件的上传操作了 example: $.ajax({ url: "your url", type: "POST", proce

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

本文对如何实现使用Ajax提交"multipart/form"格式的表单数据,已经如何在图片上传之前,在浏览器上进行预览.使用的主要相关技术HTML5的FILE API,XMLHttprequest Level2中对二进制文件上传的支持(通过构建FormData对象进行支持)以及Servlet 3.0支持的Multiconfig注解来支持文件的上传.在Servlet 3.0 规范之前通常使用第三方库如commons-fileupload进行解决文件上传. HTML5 中的 File 对

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

一.关于图片上传什么什么的 在XHTML的时代,我们使用HTML file控件上传图片一次只能上传一张.要一次上传多图,做法是借助于flash.例如swfupload.js.可惜,使用复杂的点,比如flash文件需与页面同父文件夹,JavaScript文件大小也很可观. 我之前曾翻译编辑过一篇“Ajax Upload多文件上传插件”的文章,此插件的亮点是使用隐藏的iframe框架页面模拟ajax上传,但是,实际上,还是一次只能上传1张图片,可以多次上传而已. HTML5是个好东东,其中之一就是支

闲话ajax,例ajax轮询,ajax上传文件

引语:ajax这门技术早已见怪不怪了,我本人也只是就自己真实的经验去总结一些不足道的话.供不是特别了解的朋友参考参考! 本来早就想写一篇关于ajax的文章的,但是前段时间一直很忙,就搁置了,趁着元旦放假,赶紧补上吧! ajax的出现,可以出给用户带来了很好的体验,证据如下: 1.感觉:以前要给用户呈现新的内容,就必须要刷新当前页面,结果往往是这样:用户看着看着,唰...,然后又重头看起,我那个去,这谁受得了; 自从有了ajax后,就是这样的,用户关注哪一块,变化哪一块,我们就更新那一块,完全看不

ajax上传文件 预览

需要用到:ajaxfileupload <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script src="http://libs.baidu.com/jquer

ajax上传文件

以往我用的上传文件都是Flex写的,最近html页面需要上传页面功能. 相比之下,比flex还是要麻烦一些,问题也多一些.这里记录下: ajax上传文件,我用到了ajaxfileupload.js修正版. <form id="addAttaForm" enctype="multipart/form-data"> <div class="row"> <label for="fileUpload"&g