jQuery file upload文件上传插件示例

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

一：准备相关js文件

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

二、导入js文件

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

<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、前端代码

<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>

<label class="col-sm-2 control-label">模板缩略图</label>

</div>

<span>上传模板缩略图</span>

</span>

</div>

</div>

</div>

<a class="btn btn-primary" id="save">保存模板信息</a>

</div>

js部分

//上传缩略图
$('#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('上传缩略图失败！');
    }
});

//上传缩略图

$('#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部分

/**
 * 上传缩略图及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]);
    }
}

/**

* 上传缩略图及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文件上传插件示例

相关推荐