前端上传组件Plupload使用---上传大视频(分片上传)

上传视频到服务器

1.引入js插件：

<script type="text/javascript" src="{{ static_url('plupload/js/plupload.full.min.js') }}"></script>

2.html页面如图：

<script>
<label>上传视频：</label>
<input type="text" name="video_url" id="video_url" style="display: none">
<button class="btn new_btn-w-m btn-primary" href="#" id="video_upload_btn">上传视频
    <span id="Progress" style=" opacity: 0.6;z-index:10; position: absolute; bottom: 0; left: 0; height: 100%; width: 0%; display: block; background-color: #003399"></span>
</button>
<span class="color-gray">支持AVI、wma、rmvb、rm、flash、mp4、mid、3GP等格式</span>
<video controls='controls' style="margin-top: 10px;max-width: 400px;width: 100%;">
    <source src="" type='video/mp4' id="video">
</video>
<p class="showInfo"></p>
</script>

3.js代码

<script>
$(function () {
    var uploader_video = new plupload.Uploader({//创建实例的构造方法
        runtimes: 'gears,html5,html4,silverlight,flash', //上传插件初始化选用那种方式的优先级顺序
        browse_button: ['video_upload_btn'], // 上传按钮
        url: "/ajax/upload_video?path=videos", //远程上传地址
        // flash_swf_url: 'js/plugins/plupload/Moxie.swf', //flash文件地址
        // silverlight_xap_url: 'js/plugins/plupload/Moxie.xap', //silverlight文件地址
        filters: {
            max_file_size: '1gb', //最大上传文件大小（格式100b, 10kb, 10mb, 1gb）
            mime_types: [//允许文件上传类型
                {title: "files", extensions: "mpg,m4v,mp4,flv,3gp,mov,avi,rmvb,mkv,wmv"}
            ]
        },
        multipart_params: {
            '_xsrf': $("input[name='_xsrf']").val()
        },
        chunk_size: "50mb", //分片上传文件时，每片文件被切割成的大小，为数字时单位为字节。也可以使用一个带单位的字符串，如"200kb"。当该值为0时表示不使用分片上传功能
        multi_selection: false, //true:ctrl多文件上传, false 单文件上传
        init: {
            FilesAdded: function(up, files) { //文件上传前
                plupload.each(files, function (file1) {
                    uploader_video.start();
                });
            },
            UploadProgress: function(up, file) { //上传中，显示进度条
                $('#Progress').css('width', file.percent+'%');
            },
            FileUploaded: function(up, file, info) { //文件上传成功的时候触发
                var base = '/static/media/videos/';
                var response = $.parseJSON(info.response);
                if (response.status == 'ok') {
                    var url = "http://"+location.host+base + response.name;
                    $("#video").show().attr("src", url);
                    // console.log($("#video").parent());
                    $("#video").parent().get(0).load();
                    $("#video_url").val(url);
                }
                else {
                    alert(response.error);
                }
            },
            Error: function(up, errObject) { //上传出错的时候触发
                alert(errObject.code+errObject.message);
            }
        }
    });
    uploader_video.init();
});
</script>

后端代码

1.url路由

(r"/ajax/upload_video", UploadVideoFile),

2.python代码

class UploadVideoFile(BaseHandler):
    def post(self):
        path = self.get_argument("path")
        input_name = self.get_argument("iname", "")
        nums = self.get_argument("chunks", "")
        num = self.get_argument("chunk", "")
        # 视频文件名
        filename = self.get_argument("name", "")

        # 得到视频的存储路径upload_path，就是视频文件在哪个文件夹下面
        upload_path = os.path.join(self.settings['upload_path'], path)
        print path, nums, num, filename, upload_path

        # 视频保存路径+视频文件名
        filepath = os.path.join(upload_path, filename)
        # 若不存在此目录，则创建之
        if not os.path.isdir(upload_path):
            # upload_path = upload_path.replace("/", "\\") #windows platform
            os.makedirs(upload_path)
        file_metas = self.request.files.get('file', [])
        # filename = ''
        try:
            for meta in file_metas:
                filename = meta['filename']
                print filename
                # 下面注释的地方不分片时需要用到，分片时用不到
                # ext = os.path.splitext(filename)[1]
                # 生成随机文件名
                # filename = str(uuid.uuid4())
                # filename = '%s%s' % (filename, ext)
                # filepath = os.path.join(upload_path, filename)
                # filepath = os.path.join(upload_path, num)
                with open(filepath, 'ab') as up:
                    up.write(meta['body'])
        except Exception as e:
            print e
            return self.write(json.dumps({"status": 'error', "msg": u"视频文件上传失败，请重新上传"}))
        else:
            print json.dumps({"status": 'ok', "msg": "", "base_url": "", "name": filename})
            return self.write(json.dumps({"status": 'ok', "msg": "", "base_url": "", "name": filename}))

 

发送Ajax到后台，把视频或图片保存到数据库(保存的是地址) 

1.ajax代码：

$('.btn.btn-white.add_content').click(function () {
    if ($('#poster').attr('src') == '') {
        alert('您还未上传内容照片！');
        return false;
    }

    if ($('#title').val() == '') {
        alert("内容标题不能为空！");
        return false;
    }
    var xjson = {
        "title": $("#title").val(),
        "brief": $("#brief").val(),
        "videourl" : $("#video_url").val(),
        "image": $("#image_url").val(),
        // "content": window.editor.html(),
        "content": ue.getContentTxt(),
        "category": $("#category").val(),
        "tag" : $("#tag").val(),
        '_xsrf': $("input[name='_xsrf']").val(),
    };
    $.ajax({
        url: '/admin/study/recommend/add',
        type: 'post',
        data: xjson,
        success: function (data) {
            var jsons = jQuery.parseJSON(data);
            alert(jsons.msg);
            if (jsons.status == "ok") {
                location.reload();
            }
        },
        error: function () {
            alert('error');
        }
    });
});

2.后代保存代码

class AdminAddStudyRecommend(BaseHandler):
    """增加学习推荐"""
    @BaseHandler.admin_authed
    def post(self):
        datas = self.request.arguments
        print "Add recommend=>",datas
        info = dict()
        last = self.db.tb_study_recommend.find_one({},{"id":1,"_id":0},sort=[("id", pymongo.DESCENDING)])
        info['id'] = int(last.get("id",0)) + 1 if last else 1
        info['title'] = self.get_argument('title')
        info['brief'] = self.get_argument('brief')
        info['img'] = self.get_argument('image')
        info['content'] = self.get_argument('content')
        info['category'] = self.get_argument('category')
        info['tag'] = self.get_argument('tag',info.get('category'))
        info['status'] = 1

        for k, v in info.iteritems():
            if not v:
                return self.write(json.dumps({"status": 'error', "msg": k + "为必选项，请输入信息！"}))

        info["videourl"] = self.get_argument('videourl',"")

        info['userid'] = self.admin['userid']
        info['atime'] = time.strftime("%Y-%m-%d %H:%M:%S")
        self.db.tb_study_recommend.insert(info)

        return self.write(json.dumps({"status": "ok", "msg": u'增加推荐内容成功'}))