php+jquery Ajax异步上传图片(ajaxSubmit)实例

效果如下

 代码如下 复制代码

index.php文件

php结合jquery异步上传图片(ajaxSubmit),以下为提交页面代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax异步上传图片</title>
<script src="js/jquery-1.4.2.js" language="JavaScript" type="text/javascript"></script>
<script src="js/jquery.form.js" language="JavaScript" type="text/javascript"></script>
<script type="text/javascript">

function sky_upfiles(){
    var messtxt;
 $("#sky_upform").ajaxSubmit({
                                //dataType:'script',
                                type:'post',
                                url: "doupfiles.php",   
                                beforeSubmit: function(){
                                    $("#sky_txt").html("图片上传中...");
                                },
                                success: function(data){       
                                    if(data=="1"){
                                    messtxt = "上传成功!";
                                    }else if(data=="-1"){
                                    messtxt = "文件超过规定大小!";
                                    }else if(data=="-2"){
                                    messtxt = "文件类型不符!";
                                    }else if(data=="-3"){
                                    messtxt = "移动文件出错!";
                                    }else{
                                    messtxt = "未知错误!";
                                    }
                                    $("#sky_txt").html(messtxt);               
                                    //$("#sky_txt").append(data);
                                },
                                resetForm: false,
                                clearForm: false
                        });
                        //$("#upimgform").submit();
}

        </script>
</head>
<body>
<br />
<fieldset style="width:97%">
  <legend>上传文件</legend>
    <form enctype="multipart/form-data" id="sky_upform" name="sky_upform" action="" method="post">
    <table width="100%" border="0" align="center" cellpadding="3" cellspacing="0">
      <tr>
        <td width="100" align="right" class="f-12"></td>
        <td class="f-12" align="left">
        <input name="upfile" id="upfile" maxlength="20" size="40" type="file" value="" /><input name="upmit" type="button" id="upmit" value="上传" onclick="sky_upfiles()"/>
        <font color="red" id="sky_txt"></font></td>
      </tr>      
    </form>
       
</body>
</html>

doupfiles.php文件

 代码如下 复制代码

<?php
/*
 * 1:成功上传
 *-1:文件超过规定大小
 *-2:文件类型不符
 *-3:移动文件出错
 */
if(is_uploaded_file($_FILES['upfile']['tmp_name'])){

 $photo_types=array('image/jpg', 'image/jpeg','image/png','image/pjpeg','image/gif','image/bmp','image/x-png');//定义上传格式
        $max_size=700000;    //上传照片大小限制,默认700k
        $photo_folder="upload/".date("Y")."/".date("m")."/".date("d")."/"; //上传照片路径
        ///////////////////////////////////////////////////开始处理上传
        if(!file_exists($photo_folder))//检查照片目录是否存在
        {
            mkdir($photo_folder, 0777, true);  //mkdir("temp/sub, 0777, true);
        }

$upfile=$_FILES['upfile'];
$name=$upfile['name'];
$type=$upfile['type'];
$size=$upfile['size'];
$tmp_name=$upfile['tmp_name'];

$file = $_FILES["upfile"];
$photo_name=$file["tmp_name"];
//echo $photo_name;
$photo_size = getimagesize($photo_name);

if($max_size < $file["size"])//检查文件大小
           echo "-1";       //echo "<script>alert('对不起,文件超过规定大小!');history.go(-1);</script>";
if(!in_array($file["type"], $photo_types))//检查文件类型
           echo "-2";       //echo "<script>alert('对不起,文件类型不符!');history.go(-1);</script>";
if(!file_exists($photo_folder))//照片目录
                  mkdir($photo_folder);
$pinfo=pathinfo($file["name"]);
$photo_type=$pinfo['extension'];//上传文件扩展名
$photo_server_folder = $photo_folder.time().".".$photo_type;//以当前时间和7位随机数作为文件名,这里是上传的完整路径

if(!move_uploaded_file ($photo_name, $photo_server_folder))
            {
             echo "-3"; //echo "移动文件出错";
                exit;
            }
$pinfo=pathinfo($photo_server_folder);
$fname=$pinfo['basename'];
echo "1";   //echo " 已经成功上传:".$photo_server_folder."<br />";

 

}
?>

最后把完整的php+jquery Ajax异步上传图片(ajaxSubmit)实例源码下载地址

 

时间: 2024-11-08 19:21:15

php+jquery Ajax异步上传图片(ajaxSubmit)实例的相关文章

使用Ajax异步上传图片的方法(html,javascript,php)

前两天项目中需要用到异步上传图片和显示上传进度的功能,于是找了很多外国的文章,翻山越岭地去遇上各种坑,这里写篇文章记录一下. HTML HTML代码没什么好说,一个form表单,还有文件类型的input.我们来看js部分. javascript //绑定了`submit`事件. $('#fileupload-form').on('submit',(function(e) { e.preventDefault(); //序列化表单 var serializeData = $(this).seria

jQuery Ajax 全局调用封装实例代码详解_jquery

有一种情况:全站都要用异步方式来调用 数据,提交数据,那么你每次操作 都会要$.ajax({.....}) 写重复的方法 和代码,冗余太大, 也浪费时间,虽说你有代码自动提示补全,但真的不优雅,身为前端极客,是不能允许的! [嘿嘿!虽说我现在基本不用jquery了 ,不过异步概念 是永远要用的,就帮助下新人] jQuery Ajax通用js封装 第一步:引入jQuery库 <script type="text/javascript" src="/js/jquery.mi

MVC+jQuery.Ajax异步实现增删改查和分页_jquery

本文实例为大家分享了MVC+jQuery.Ajax异步实现增删改查和分页的具体代码,供大家参考,具体内容如下 1.Model层代码 using System; using System.Data; using System.Configuration; using System.Linq; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.HtmlControls; usin

浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法

 本篇文章主要是对jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助 在调用一个jquery的ajax方法时我们有时会需要该方法返回一个值或者给某个全局变量赋值,可是我们发现程序执行完后并没有获取到我们想要的值,这时很有可能是因为你用的是ajax的异步调用async:true(默认情况),如:    代码如下: function ManageCommentText(text) { var result = te

jQuery Ajax 异步加载显示等待效果代码分享_jquery

AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1) 使用CSS和XHTML来表示. 2) 使用DOM模型来交互和动态显示. 3) 使用XMLHttpRequest来和服务器进行异步通信. 4) 使用javascript来绑定和调用. 通过AJAX异步技术,可以在客户端脚本与web服务器交互数据的过程中使用XMLHttpRequest对象来完成HTTP请求(Reques

ASP.NET jquery ajax传递参数的实例_javascript技巧

第一种:GET传递 前台 ajax   GET 传递 :即在请求的地址后面加上参数,URL地址长度有显示,安全性低 后台接收:Request.QueryString["参数名字"]! 例如: function LoadBar(id) { var project = id; var month = $("#txtMonth").val(); $.ajax({ type: "GET", async: false, url: 'GetProjectSc

Ajax异步请求技术实例讲解

AJAX的全称是Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX不是新的编程语言,而是一种使用现有标准的新方法.ajax是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下. ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. ajax是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换.ajax可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分

ajax异步调用数据实例

ajax异步调用数据实例 通过ajax在客户端调用后台代码,通过后台代码更改,修复,查询数据,并把结果返回给客户端,在客户端获取到服务器返回的数据在做相应的操作,从而实现通过HTML控件操作一些在网页特效比较难实现的功能:比如通过HTML的控件访问查询数据库教程,并把结果传给客户端显示,这方面在google地图开发应用得比较多,下面以一个简单的实例说明: 添加一个.asp教程x的页面,命名为:ajaxPKashx.aspx,全部代码如下:  1 <%@ Page Language="C#&

Jquery Ajax 异步处理Json数据.

啥叫异步,啥叫Ajax.咱不谈啥XMLHTTPRequest.通俗讲异步就是前台页面网页特效能调用后台方法.这样就达到了无刷新.所谓的Ajax.这里我们讲二种方法 方法一:(微软有自带Ajax框架) 在Asp.net里微软有自己的Ajax框架.就是在页面后台.cs文件里引入 using System.Web.Services 空间 然后定义静态方法(方法前加上 [WebMethod])     [WebMethod]     public static string ABC(string ABC