media_upload.inc 8.78 KB
<?php
/**
 * 视频上传
 * $Id: media_upload.php,v 1.1 2020/01/03 11:18:46  Exp $
 * @author lixq
 * @package manager.public_html
 **/

?>
<div id="change">
	<p class="edit_title">视频上传</p>
	<form id="form" name="media_upload" action="media_upload_result.php" method="post" enctype="multipart/form-data">
		<input name="post_max" type="hidden" value="<?=ini_get('post_max_size')?>">
		<input name="upload_max" type="hidden" value="<?=ini_get('upload_max_filesize')?>">
		<input type="hidden"  name="parent_category_id" value="<?=$parent_category_id?>"/>
		<input type="hidden"  name="sub_category_id" value="<?=$sub_category_id?>"/>
	<div class="edit_content">
		<p><b>视频名称:</b><el-input v-model="title" name="title" class="input_200"></el-input><br /></p>
		
		<p><b>视频标签:</b><el-input v-model="media_tags" name="media_tags" class="input_200 popselect" readonly onfocus="doCheckPopup('media_upload','media_tags','tags','pop_tag_list.php');"></el-input>
		<input type="hidden" name="tags"  />
		<el-button type="primary" class="height_30" @click="selectClear('media_upload', 'media_tags', 'tags');">清空</el-button>
		<el-button type="primary" class="height_30" @click="popAddTag()">添加标签</el-button></p>
		
		
		<p><b>讲师姓名:</b><el-input v-model="teacher" name="teacher" class="input_200"></el-input><br /></p>
		
		<p><b>讲师介绍:</b><textarea v-model="teacher_profile" name="teacher_profile" rows="5"></textarea><br /></p>
		
		<p><b>视频封面图:</b><a href='javascript:void(0);' class="el-button el-button--primary blueButton">选择文件</a>
			<input id="image_file" class="myFileUpload" name="front_image" type="file" accept="image/*"/>
		</p>
			<div id="img_thumbnail">
    	<img id="imgshow" height="150px" alt="封面图" />
		</div>
		
		
		<p><b>视频类型:</b><template>
  		<el-radio v-model="media_type" name="media_type" label="0">单个</el-radio>
  		<el-radio v-model="media_type" name="media_type" label="1">合集</el-radio>
		</template></p>
		
		<div v-if="is_category_show">
		<p><b>一级分类名称:</b><el-select v-model="parent_category_id" size="small">
        <el-option
            v-for="item in parent_category_list"
            :key="item.id"
            :label="item.title"
            :value="item.id">
        </el-option>
    	</el-select></p>
			
    <p><b>二级分类名称:</b><el-select v-model="sub_category_id" size="small">
        <el-option
            v-for="item in new_sub_category_list"
            :key="item.id"
            :label="item.title"
            :value="item.id">
        </el-option>
    	</el-select></p>
				
		</div>
		<div v-if="is_course_show">
  		<p><b>选择合集:</b></p>
  		<el-input v-model="course_name" name="course_name" class="input_200 popselect" readonly onfocus="doRadioPopup('media_upload','course_name','course_id','pop_media_list.php');"></el-input>
  		<input type="hidden" name="course_id" value="0" />
  		<el-button type="primary" class="height_30" @click="selectClear('media_upload', 'course_name', 'course_id');">清空</el-button>
  		<el-button type="primary" class="height_30" @click="popAddCourse()">创建合集</el-button>
  		<br />
		</div>
		<p><b>视频种类:</b><template>
  		<el-radio v-model="media_kind" name="media_kind" label="false">志愿免费</el-radio>
  		<el-radio v-model="media_kind" name="media_kind" label="true">公益收费</el-radio>
		</template></p>
		
		<div v-if="is_price_show">
  		<p><b>收费价格:</b><el-input v-model="price" name="price" type="number" class="input_200"></el-input></p>
		</div>
		<p><b>课程简介:</b><textarea v-model="comment" name="comment" rows="5"></textarea></p>
		
		<p><b>上传视频:</b><a href='javascript:void(0);' class="el-button el-button--primary blueButton">选择文件</a>
			<input id="media_file" class="myFileUpload" name="media" type="file" accept="audio/mp4,video/mp4" style="margin-left: 120px;">
		</p>
		<i class="el-icon-upload img-uploader-icon" style="padding-left: 110px;">文件大小限制<span id="file_max_size"></span>M!</i><br/>
		<span id="media_thumbnail" style="height: 20px;margin-left: 120px;"></span><br/><br/>
		<el-button type="primary" @click="submit()" class="edit_btn" style="margin-left: 110px;">上传发布</el-button><br/><br/><br/><br/>
	</div>
	</form>
</div>

<script type="text/javascript">
	var v = new Vue({
		el:'#change',
		data:{
		  title:'',
		  media_tags:'',
		  media_type:'0',
		  teacher:'',
		  media_kind:'true',
		  price:'',
		  course_name:'',
		  is_category_show:true,
		  is_course_show:false,
		  is_price_show:true,
		  teacher_profile:'',
		  comment:'',
		  parent_category_id:'',
			sub_category_id:'',
		  sub_category_list:<?=json_encode($sub_category_list)?>,
			new_sub_category_list:<?=json_encode($new_sub_category_list)?>,
			parent_category_list:<?=json_encode($parent_category_list)?>
		},
		watch:{
		  media_type(val,oldval){
				if(val == "0"){
				  this.is_course_show = false;
				  this.is_category_show = true;
				}else{
					this.is_course_show = true;
					this.is_category_show = false;
				}
		  },
		  media_kind(val,oldval){
				if(val == 'false'){
				  this.is_price_show = false;
				}else{
					this.is_price_show = true;
				}
		  },
		  parent_category_id(val,oldval){
        var new_list = [];
        this.sub_category_list.map(function(item) {
          if (item.parent_id == val) {
            new_list.push(item);
          }
        });
      	this.new_sub_category_list = new_list;
      	this.sub_category_id = this.new_sub_category_list[0]["id"];
      }
		},
		methods:{
			submit:function(){
				if(!this.title){
					this.$message({
		            type: 'error',
		            message: '请输入视频名称!'
		          });
		          return;
				}
				if($("input[name='tags']").val().length < 1){
					this.$message({
		            type: 'error',
		            message: '请选择视频标签!'
		          });
		          return;
				}
				if(!$('#image_file').get(0).files[0]){
					this.$message({
		            type: 'error',
		            message: '请选择封面图!'
		          });
		      return;
				}
				if(this.media_type == '0' && !this.parent_category_id){
				  this.$message({
            type: 'error',
            message: '请选择视频一级分类名称!'
          });
          return;
				}
				if(this.media_type == '0' && !this.sub_category_id){
				  this.$message({
            type: 'error',
            message: '请选择视频二级分类名称!'
          });
          return;
				}
				if(this.media_type == '1' && $("input[name='course_id']").val() == '0'){
				  this.$message({
            type: 'error',
            message: '请选择合集名称!'
          });
          return;
				}
				if(this.media_kind == 'true' && !this.price){
				  this.$message({
            type: 'error',
            message: '请输入收费价格!'
          });
          return;
				}
				if(this.media_kind == 'true' && !isPointNumber(this.price)){
				  this.$message({
            type: 'error',
            message: '请输入正确格式收费价格!'
          });
          return;
				}
				
				if(!$('#media_file').get(0).files[0]){
					this.$message({
		            type: 'error',
		            message: '请选择上传视频!'
		          });
		      return;
				}
				
				$("input[name='parent_category_id']").val(this.parent_category_id);
				$("input[name='sub_category_id']").val(this.sub_category_id);
				$('#form').submit();
			},
			
		}
	})
	window.onload = function(){
  	$('#image_file').change(function(){
      var file = $('#image_file').get(0).files[0];
      if(file.type !== 'image/png'&&file.type !=='image/gif'&&file.type !=='image/jpg'&&file.type !=='image/jpeg'){
        v.$message({
          type: 'error',
          message: '上传文件只能是图片格式!'
        });
        return;
      }
			if(file.size / 1024 / 1024 > 2){
			  v.$message({
          type: 'error',
          message: '上传文件大小不能超过 2MB!'
        });
        return;
			}
      var reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload=function(e){
        $('#imgshow').get(0).src = e.target.result;
      }
      $('#img_thumbnail').css("visibility","visible");
      $('#img_thumbnail').css("display","block");
    })
    $('#media_file').change(function(){
      var file = $('#media_file').get(0).files[0];
      if(file.type !== 'audio/mp4'&&file.type !=='video/mp4'){
        v.$message({
          type: 'error',
          message: '上传文件只能是mp4格式!'
        });
        return;
      }
      var max_size = parseInt($('#file_max_size').html());
      
			if(file.size / 1024 / 1024 > max_size){
			  v.$message({
          type: 'error',
          message: '上传文件大小不能超过 '+max_size+'MB!'
        });
        return;
			}
			
      $('#media_thumbnail').html(file.name);
    })
	}
</script>