继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

PHP+jquery+ajaxupload 无刷新上传文件或图片

慕婉清0083722
关注TA
已关注
手记 322
粉丝 72
获赞 277

PHP+jquery+ajaxupload 无刷新上传文件或图片

我参照了网上其它的方法,其它人写的都存在一些问题。我进行了些修正。

上传文件更改文件名,防止文件重名。

第一步:包含这个;jquery  库文件 和;ajaxupload库文件。

自己上网下吧,有很多。

第二步:php上传类file_upload.php

<?php
/*
program:赵金鹏
time:2012-04-11
todo:代码还有很多可以加的方法,由于时间关系没有加,以后有需要再更新。
*/
  class file_upload
  {
      var $g_filename; // File对象名称
      var $g_Directroy;  //上传至目录
      var $g_MaxSize;    //最大上传大小 
      var $g_doUpFile;   //上传的文件名
      var $g_sm_File;   //缩略图名称
      var $g_Error;     //错误参数
      //构造函数
      public function file_upload($file_name,$dir_upload='')
      {
           $this->g_filename=$file_name;
           $this->g_MaxSize=2097152; // (1024*2)*1024=2097152 就是 2M
           $this->g_Error=0;
           if($dir_upload=="")
                $this->g_Directroy="upload";
           else
                $this->g_Directroy=$dir_upload;
      }
      //上传
      function upload()
      {

          if($this->Is_uploadDir() && $this->Is_FileMax())
          {
              $this->get_newname();
              $file_path=$this->g_Directroy.'/'.$this->g_doUpFile;
              if(!move_uploaded_file( $_FILES[$this->g_filename]['tmp_name'], $file_path))
                {
                    $this->g_Error=5;
                    return $this->get_error();
                }
              else
              {
                  $this->g_Error=0;
                  return $this->get_error();
              }
          }
          else
                return  $this->get_error();
      }
      //生成新名称
      function get_newname()
      {
            $tempName = $_FILES[$this->g_filename]['name'];
            $extStr = explode('.', $tempName);
            $count = count($extStr)-1;
            $ext = $extStr[$count];
            $this->g_doUpFile=date('YmdHis').rand(0, 9).'.'.$ext;
      }
      //验证上传目录是否存在
      function Is_uploadDir()
      {
           if(!is_dir($this->g_Directroy))
            {
                if(!mkdir($this->g_Directroy))
                    {
                        $this->g_Error=1;
                        return false;
                    }
                if(!chmod($this->g_Directroy,0755))
                    {
                        $this->g_Error=2;
                        return false;
                    }
            }
            return true;
      }
      //验证上传文件是否超出限制
      function Is_FileMax()
      {
          if($_FILES[$this->g_filename]['size']>$this->g_MaxSize)
            {
               $this->g_Error=3;
               return false;
           }
           return true;
      }
      //返回服务器文件名
      function get_filename()
      {
          return  $this->$g_doUpFile;
      }
      //自定义错误代码
      function get_error()
      {
          switch($this->g_Error)
          {
              case 0:
                $tip="success:".$this->g_doUpFile;break;
              case 1:
                $tip="文件上传目录不存在并且无法创建文件上传目录";break; 
              case 2:
                $tip="文件上传目录的权限无法设定为可读可写";break;
              case 3:
                $tip="上传的文件大小超过了规定大小";break;
              case 4:
                $tip="请选择上传的文件";break;
              case 5:
                $tip="复制文件失败,请重新上传";break;
             
          }
          return  $tip; 
      }
  }
?>
第三步 类调用方法页 upload.php

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<?php
include "file_upload.php";
$fu=new file_upload("userfile");
echo $fu->upload();

?>  

第四步 页面实现 add.php

图片上传以后,直接显示预览图片。

<html>
    <head>
    <title>景点管理</title>
      <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
      <link rel="stylesheet" href="../../css/share.css" type="text/css">
      <script type="text/javascript" src="../../js/jquery-1.6.2.js"></script>
      <script type="text/javascript" src="../../js/ajaxupload.3.6.js"></script>
      <script type="text/javascript">
      $(document).ready(function(){
    var button = $('#upload_button'), interval;
    var fileType = "pic",fileNum = "one";
    new AjaxUpload(button,{
        action: 'upload.php',
        name: 'userfile',
        onSubmit : function(file, ext){
            if(fileType == "pic")
            {
                if (ext && /^(jpg|png|jpeg|gif)$/.test(ext)){
                    this.setData({
                        'info': '文件类型为图片'
                    });
                } else {
                    button.text('非图片类型文件,重新上传');
                    return false;              
                }
            }
            $("#pic_path").val(file);           
            button.text('文件上传中');
           
            if(fileNum == 'one')
                this.disable();
            interval = window.setInterval(function(){
                var text = button.text();
                if (text.length < 14){
                    button.text(text + '.');                   
                } else {
                    button.text('文件上传中');            
                }
            }, 200);
        },
        onComplete: function(file, response){
            if(response.indexOf("success")<0)
                alert(response);
            else
            {
                $arr=new Array();
                $arr=response.split(":")
                $("#ima").attr("src","upload/"+$arr[1]);
                $("#ima").show();
                button.text('重新上传');
            }           
            window.clearInterval(interval);        
            this.enable();
        }
    });
 
});
      </script>
      </head>
     
<ul>

    <input type="text" size="50"  id="pic_path"><div id="upload_button" >文件上传</div>
 <img src="" alt="预览图片" id="ima" > 
    </ul> 

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP