您现在的位置是：首页> 网站开发> ThinkPHP

ThinkPHP5开发项目时,利用jQuery的Ajax异步上传图片并实时预缆

  • 5306人已阅读
  • 时间：2018-10-16 08:52:23
  • 分类：ThinkPHP
  • 作者：祥哥

说点干货.先看一效果如下图:

QQ图片20180608145559.png

上代码啦注意看:

HTML中

1
2
3
4
<input value="上传图片" class="btn btn-azure" onclick="pic.click();" type="button"><br />
<input id="pic" name="pic" onchange="up(this);" type="file" style="display:none">
<div id="result"></div>
<div id="show"></div>

为什么这么写呢?因为file类型是不支持点击函数的.所以造了个按钮调用它

Ajax实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
function up(){
var animateimg = $("#pic").val(); //获取上传的图片名 带//
var imgarr=animateimg.split('\\'); //分割
var myimg=imgarr[imgarr.length-1]; //去掉 // 获取图片名
var houzui = myimg.lastIndexOf('.'); //获取 . 出现的位置
var ext = myimg.substring(houzui, myimg.length).toUpperCase();  //切割 . 获取文件后缀
var file = $('#pic').get(0).files[0]; //获取上传的文件
var fileSize = file.size;           //获取上传的文件大小
var maxSize = 4194304;              //最大4MB
if(ext !='.PNG' && ext !='.GIF' && ext !='.JPG' && ext !='.JPEG' && ext !='.BMP'){
    parent.layer.msg('文件类型错误,请上传图片类型');
    return false;
}else if(parseInt(fileSize) >= parseInt(maxSize)){
    parent.layer.msg('上传的文件不能超过4MB');
    return false;
}else{
    var data = new FormData($('#form1')[0]);
    $.ajax({
        url: "{:url('admin/Ad/uppic')}",
        type: 'POST',
        data: data,
        dataType: 'JSON',
        cache: false,
        processData: false,
        contentType: false
    }).done(function(ret){
        if(1==ret['isSuccess']){
            var result = '';
            var result1 = '';
            // $("#show").attr('value',+ ret['f'] +);
            result += '<img src="' + '__STATIC__' + ret['f']  + '" height="100">';
            result1 += '<input value="' + ret['f']  + '" name="pic" style="display:none;">';
            $('#result').html(result);
            $('#show').html(result1);
 
            layer.msg('上传成功');
        }else{
            layer.msg('上传失败');
        }
    });
   }
}

这里面祥哥注释很清楚了.但要注意的是这里提示信息使用了layer,所以别忘了引入哦.

后台数据处理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
public function uppic(){
    if(Request::instance()->isAjax()){
        //获取表单文件上传
        $file = request()->file('pic');
        // 移动到框架应用根目录
        $info = $file->move(ROOT_PATH . 'public' . DS . 'static' . DS . 'uploads');
        // 声明空数组用于返回值
        $response = array();
        if($info){
            //替换\并拼接路径
            $imgp= str_replace('\\','/',$info->getSaveName());
            $imgpath='/uploads/'.$imgp;
            //返回值赋值
            $response['isSuccess'] = 1;
            $response['f'] = $imgpath;
        }else{
            $response['isSuccess'] = 2;
        }
        return $response;
    }else{
        return $this->error('不好意思出错了!');
    }
}

还是很简单的,兼容所有浏览器,能达到实时预缆.是不是比用那些插件还不兼容强很多.

上一篇：excel无法打开文件,文件格式或文件扩展名无效,请确定文件未损坏

下一篇：PHP中时间和日期常用函数

相关文章

Top