源码 ASP源码 PHP源码 NET源码 JAVA源码 FLASH源码 其它源码 整站源码 常见问题

PHP+ajaxFileUpload 异步上传文件插件

PHP源码 HTML我帮您 27天前  次浏览

准备环境

jquery.js 
ajaxfileupload.js (资源下载地址:https://vdisk.weibo.com/s/C2-hAnBjUQqZ2


ajaxfileupload原理

原理:ajaxfileupload是通过监听iframe的onload方法来实现, 当从服务端处理完成后,就触发iframe的onload事件调用其绑定的方法,在绑定的方法中获取iframe中服务器返回的数据体(支持的普通文本,json,xml,script, html)

语法:$.ajaxFileUpload([options])

参数说明:

1,url 上传处理程序地址,也就是我发送给服务器端所要处理上传的地址。

2,fileElementId 需要上传的文件域的ID,即的ID。

3,secureuri 是否启用安全提交,默认为false。

4,dataType 服务器返回的数据类型。可以为xml,script,json,html。如果不填写,jQuery会自动判断。

5,success 提交成功后自动执行的处理函数,参数data就是服务器返回的数据。

6,error 提交失败自动执行的处理函数。

7,data 自定义参数。这个很有用,比如你上传图片的同时想把图片名也一起传过去,可以用这个参数去实现。

8,type 当要提交自定义参数时,这个参数要设置成post



接下来我们看看如何去使用

静态页面的代码

<div class="form-group">
   <label for="firstname" class="col-sm-1 control-label">身份证正面</label>
    <div class="col-sm-2">
     <label for="inputfile"></label>

    <input type="hidden" id="headImg"/>

    <input type="file" id="headImgUpload" name="headImgUpload"/><br/>
       <label class="control-label" for="headImgUpload" style="display: none;"></label>
        <p class="help-block"><img class="img-rounded" src="#" width="100" height="100" id="img1" alt="请上传身份证正面"  /></p>
        </div>
  </div>

引入js代码

ajaxHeardImgUpload.js文件如下

$(document).ready(function(){
    //解决file的change事件只能执行一次的问题
    $(document).on('change','#headImgUpload',function(){
        ajaxHeadImgUpload();

    });
});


//上传图片的方法,
function ajaxHeadImgUpload(){
    //调用ajaxfileupload.js中的方法
    $.ajaxFileUpload({
        url:'/MyBlog/index.php?p=back&c=Uploader&a=uploaderHead',//上传图片要提交到的PHP后台Action方法
        secureuri:false,//是否用安全提交,默认为false
        fileElementId:'headImgUpload',//file选择文件的框的id
        dataType:'json',//数据返回格式,如果用json,需要修改ajaxfileupload.js中的内容 eval("data = " + data ); -->data = jQuery.parseJSON(jQuery(data).text());
        success: function (data){
            if(data.success){
                //获得json格式数据的值,并转换显示图片在页面上
                 $("#img1").attr("src",data.path);
                 $("#headImg").val(data.path);

            }
            showInfo(data.info);
        },
        error: function(data, status, e){   //提交失败自动执行的处理函数
            alert(e);
        }
    });
}


function showInfo(msg) {
    $("#div_info").text(msg);
    $("#modal_info").modal('show');
}

PHP中的处理上传的代码

<?php
/**
 * Created by PhpStorm.
 * User: c
 * Date: 2017/4/17
 * Time: 9:03
 */

class UploaderController extends BaseController {


    //上传头像方法
    public function uploaderHeadAction(){
        $fileName = "headImgUpload";
        $this->uploader($fileName);

    }

    //上传微信二维码方法
    public function uploaderWeChatAction(){
        $fileName = "wechatImgUpload";
        $this->uploader($fileName);

    }




    public function uploader($fileName) {
        $files = array();
        $files['name'] = $_FILES[$fileName]['name'];   //上传图片的原名字
        $files['info'] = ""; //和该文件上传相关的信息
        $files['size'] = $_FILES[$fileName]['size'];   //已上传文件的大小,单位为字节
        $files['type'] = $_FILES[$fileName]['type'];   //文件的 MIME 类型,需要浏览器提供该信息的支持,例如"image/gif"
        $files['success'] = false;            //这个用于标志该图片是否上传成功
        $files['path'] = '';                //存图片路径

        //:0:表示没有发生错误
        if($_FILES[$fileName]['error']==0){
            //is_uploaded_file — 判断文件是否是通过 HTTP POST 上传的
            if(is_uploaded_file($_FILES[$fileName]['tmp_name'])) {
                    //扩展名
                 $extension = '';
                 //strcmp — 二进制安全字符串比较 (区分大小写)
               // 如果 str1 小于 str2 返回 < 0; 如果 str1 大于 str2 返回 > 0;如果两者相等,返回 0。
                 if(strcmp($_FILES[$fileName]['type'], 'image/jpeg') == 0) {
                     $extension = '.jpg';
                  }else if(strcmp($_FILES[$fileName]['type'], 'image/png') == 0) {
                     $extension = '.png';
                  }else if(strcmp($_FILES[$fileName]['type'], 'image/gif') == 0) {
                     $extension = '.gif';
                 }else{
                     //如果type不是以上三者,我们就从图片原名称里面去截取判断去取得(处于严谨性)
                     //strrchr — 查找指定字符在字符串中的最后一次出现
                     $substr = strrchr($_FILES[$fileName]['name'], '.');
                     if(FALSE != $substr) {
                         $files['info'] = "文件类型有误";
                     }
                      //strcasecmp — 二进制安全比较字符串(不区分大小写),比较字符串是否相同
                     //如果 str1 小于 str2 返回 < 0; 如果 str1 大于 str2 返回 > 0;如果两者相等,返回 0。
                     //取得原名字的扩展名后,再通过扩展名去给type赋上对应的值
                     if(strcasecmp($substr, '.jpg') == 0 || strcasecmp($substr, '.jpeg') == 0 || strcasecmp($substr, '.jfif') == 0 || strcasecmp($substr, '.jpe') == 0 ) {
                         $files['type'] = 'image/jpeg';
                     }else if(strcasecmp($substr, '.png') == 0) {
                         $files['type'] = 'image/png';
                     } else if(strcasecmp($substr, '.gif') == 0) {
                         $files['type'] = 'image/gif';
                     }else {
                         $files['info'] = "上传的文件类型不符合";
                     }
                     $extension = $substr;//赋值扩展名

                 }

                 if(trim($files['info'])==""){
                    //对临时文件名加密,用于后面生成复杂的新文件名
                    $md5 = md5_file($_FILES[$fileName]['tmp_name']);
                    //取得图片的大小
                    //getimagesize() 函数将测定任何 GIF,JPG,PNG,SWF,SWC,PSD,TIFF,BMP,IFF,JP2,JPX,JB2,JPC,XBM
                    // 或 WBMP 图像文件的大小并返回图像的尺寸以及文件类型
                    //和一个可以用于普通 HTML 文件中 IMG 标记中的 height/width 文本字符串。
                    $imageInfo = getimagesize($_FILES[$fileName]['tmp_name']);
                    $rawImageWidth = $imageInfo[0];
                    $rawImageHeight = $imageInfo[1];
                    //设置图片上传路径,放在upload文件夹,以年月日生成文件夹分类存储,

                    $path = ROOT . 'upload\\' . @date("Ymd"). '\\';
                    ///确保目录可写
                    if($this->ensure_writable_dir($path)){
                        ////文件名
                        $name = "$md5.0x{$rawImageWidth}x{$rawImageHeight}{$extension}";
                        //加入图片文件没变化到,也就是存在,就不必重复上传了,不存在则上传
                        $ret = file_exists($path . $name) ? true : move_uploaded_file($_FILES[$fileName]['tmp_name'], $path . $name);
                        if ($ret === false) {
                            $files['info'] = "上传失败";
                        } else {
                            $files['path'] = "\\MyBlog\\upload\\" . @date("Ymd"). '\\'. $name;        //存图片路径
                            $files['success'] = true;            //图片上传成功标志
                            $files['width'] = $rawImageWidth;    //图片宽度
                            $files['height'] = $rawImageHeight;    //图片高度
                            $files['info'] = "上传成功";//写入成功
                        }
                    }else{
                        $files['info'] = "目录不可写";//目录不可写
                    }
                 }

            }else{
                $files['info'] = "上传失败";//上传失败
            }

        }


        echo json_encode(array(
            'success' =>  $files['success'],
            'path' => $files['path'],
            'info'=>$files['info'],
         ));
    }


    /**
     * 判断是否可写
     * @param $dir
     * @return bool
     */
    function ensure_writable_dir($dir) {
        if(!file_exists($dir)) {
            mkdir($dir, 0766, true);
            chmod($dir, 0766);
            chmod($dir, 0777);
        }
        else if(!is_writable($dir)) {
            chmod($dir, 0766);
            chmod($dir, 0777);
            if(!is_writable($dir)) {
               return false;
            }
        }
        return true;
    }


}

最后就可以看到上传结果了



相关链接

发表评论