日拱一卒无有尽，功不唐捐终入海

jQuery file upload文件上传插件示例

jQuery Sam 808℃

jquery file upload是一款实用的上传文件插件

一：准备相关js文件

jquery file upload 下载地址：https://github.com/blueimp/jQuery-File-Upload

二、导入js文件

注意：js文件引入的先后顺序不可以乱

JavaScript
1
2
3
4
5
6
7
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- jquery file upload相关js -->
<script src="js/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>
<script src="js/jquery.fileupload-process.js"></script>
<script src="js/jquery.fileupload-validate.js"></script>

三、涛哥项目中使用的例子

1、前端代码

XHTML
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
<div class="form-group">
    <label class="col-sm-2 control-label">模板缩略图</label>
    <div class="col-sm-6">
        <input name="thumbnail" disabled id="thumbnail" type="text" class="form-control">
    </div>
    <div class="col-sm-4">
        <span class="btn btn-success fileinput-button">
            <i class="glyphicon glyphicon-plus"></i>
            <span>上传模板缩略图</span>
            <input id="upload_thumbnail" type="file" name="files[]">
        </span>
    </div>
</div>
 
<div class="form-group">
    <div id="progress" class="progress col-sm-offset-2 col-sm-5">
        <div class="progress-bar progress-bar-success"></div>
    </div>
    <div id="message" class="col-sm-5" style="color:#FF0000;font-size:16px"></div>
</div>
 
<div class="hr-line-dashed" style="margin-top:30px"></div>
<div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
        <a class="btn btn-primary" id="save">保存模板信息</a>
    </div>
</div>

js部分

JavaScript
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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
//上传缩略图
$('#upload_thumbnail').fileupload({
    url: '/bannermaker/upload',
    dataType: 'json',
    maxNumberOfFiles : 1,
    add: function (e, data) {
        var acceptFileTypes = /(jpe?g|png)$/i;
        var name = data.originalFiles[0]["name"];
        var index = name.lastIndexOf(".")+1;
        var fileType = name.substring(index,name.length);
        if(!acceptFileTypes.test(fileType)){
            alert("上传文件类型不对！");
            return false;
        }
        var size = data.originalFiles[0]["size"];
        //缩略图不能大于2MB
        if(size > (2*1024*1024)){
            alert("上传文件超过最大限制！");
            return false;
        }
        //验证缩略图是否是正方形并且宽大于160px
 
        var reader = new FileReader();
        var baseImg = data.originalFiles[0]
        reader.onload = function (e) {
            //加载图片获取图片宽度和高度
            var image = new Image();
            image.onload = function () {
                var width = image.width;
                var height = image.height;
                if(width!=height){
                    alert("上传的缩略图必须是正方形！");
                    data.abort();
                }
                if(width<160){
                    alert("上传的缩略图宽度不能小于160px！");
                    data.abort();
                }
            }
            image.src = e.target.result;
        };
        reader.readAsDataURL(baseImg);
 
        data.submit();
    },
    done: function (e, data) {
        $('.progress .progress-bar').css('width','0%');
        $('#message').addClass('col-sm-offset-2');
        $('#message').show();
        if(data.result.status){
            $('#thumbnail').val(data.result.url);
            $('#message').text('上传缩略图成功！');
        }else{
            $('#message').text('上传缩略图失败！');
        }
    },
    progressall: function (e, data) {
        $('#message').hide();
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('.progress .progress-bar').css(
            'width',
            progress + '%'
        );
    },
    fail: function (e, data) {
        $('.progress .progress-bar').css('width','0%');
        $('#message').text('上传缩略图失败！');
    }
});

后端php部分

PHP
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
/**
* 上传缩略图及svg到oss
* @param Request $request
* @return bool|string
* https://www.phpnote.cc
*/
public function upload(Request $request)
{
    $file = $request->file('files')[0];
    if($request->hasFile('files') && $file->isValid()){
        $path = pathinfo($file->getClientOriginalName(), PATHINFO_EXTENSION);
        $filename = md5(time().$file->getClientOriginalName()).'.'.$path;
        try{
            //将图片上传至OSS
            $oss_filename = 'bannermaker/'.date('Ymd', time()).$filename;
            Oss::uploadImg2Oss($file->getPathname(), $oss_filename);
            $oss_path = config('cdn.url').$oss_filename;
            return response()->json(['status'=>true, 'url'=>$oss_path]);
        }catch (FileException $e){
            return response()->json(['status'=>false]);
        }
    }else{
        return response()->json(['status'=>false]);
    }
}

更多待涛哥实践总结分享…

 

转载请注明：PHP笔记 » jQuery file upload文件上传插件示例

喜欢 (0)