music_edit.html 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189
  1. <include file="public@header" />
  2. </head>
  3. <body>
  4. <div class="wrap">
  5. <ul class="nav nav-tabs">
  6. <li ><a href="{:url('Music/index')}">背景音乐列表</a></li>
  7. <li class="active"><a >音乐编辑</a></li>
  8. </ul>
  9. <form method="post" class="form-horizontal js-ajax-form margin-top-20" action="{:url('Music/music_edit_post')}">
  10. <fieldset>
  11. <input type="hidden" name="id" value="{$info['id']}">
  12. <div class="form-group" >
  13. <label for="input-classify_id" class="col-sm-2 control-label"><span class="form-required">*</span>音乐分类</label>
  14. <div class="col-md-6 col-sm-10">
  15. <select class="form-control" name="classify_id">
  16. <option value="0">默认分类</option>
  17. <volist name="classify" id="vo">
  18. <option value="{$vo['id']}" <if condition="$info['classify_id'] eq $vo['id']"> selected </if>>{$vo['title']}</option>
  19. </volist>
  20. </select>
  21. </div>
  22. </div>
  23. <div class="form-group" >
  24. <label for="input-title" class="col-sm-2 control-label"><span class="form-required">*</span>音乐名称</label>
  25. <div class="col-md-6 col-sm-10">
  26. <input type="text" class="form-control" id="input-title" name="title" value="{$info['title']}">
  27. </div>
  28. </div>
  29. <div class="form-group" >
  30. <label for="input-author" class="col-sm-2 control-label"><span class="form-required">*</span>演唱者</label>
  31. <div class="col-md-6 col-sm-10">
  32. <input type="text" class="form-control" id="input-author" name="author" value="{$info['author']}" >
  33. </div>
  34. </div>
  35. <div class="form-group">
  36. <label for="input-user_login" class="col-sm-2 control-label"><span class="form-required">*</span>封面</label>
  37. <div class="col-md-6 col-sm-10">
  38. <input type="hidden" name="img_url" id="thumbewm" value="{$info['img_url']}">
  39. <a href="javascript:uploadOneImage('图片上传','#thumbewm');">
  40. <if condition="$info['img_url'] neq ''">
  41. <img src="{:get_upload_path($info['img_url'])}"
  42. id="thumbewm-preview"
  43. style="cursor: pointer;max-width:150px;max-height:150px;"/>
  44. <else/>
  45. <img src="__TMPL__/public/assets/images/default-thumbnail.png" id="thumbewm-preview" style="cursor: pointer;max-width:150px;max-height:150px;"/>
  46. </if>
  47. </a>
  48. <input type="button" class="btn btn-sm btn-cancel-thumbewm" value="取消图片">
  49. <p class="help-block">建议尺寸200px*200px</p>
  50. </div>
  51. </div>
  52. <div class="form-group" >
  53. <label for="input-length" class="col-sm-2 control-label"><span class="form-required">*</span>音乐长度</label>
  54. <div class="col-md-6 col-sm-10">
  55. <input type="text" class="form-control" id="length" value="{$info['length']}" name="length" readonly="readonly"><p class="help-block">系统自动获取</p>
  56. </div>
  57. </div>
  58. <div class="form-group" >
  59. <label for="input-use_nums" class="col-sm-2 control-label"><span class="form-required">*</span>被使用次数</label>
  60. <div class="col-md-6 col-sm-10">
  61. <input type="text" class="form-control" id="input-use_nums" name="use_nums" value="{$info['use_nums']}"><p class="help-block">填写正整数</p>
  62. </div>
  63. </div>
  64. <div class="form-group" >
  65. <label for="input-file" class="col-sm-2 control-label"><span class="form-required">*</span>上传音乐</label>
  66. <div class="col-md-6 col-sm-10">
  67. <input type="file" name="file" id="upfile" /><p class="help-block">MP3格式(如需重新更换音乐请上传文件)</p>
  68. </div>
  69. </div>
  70. <div class="form-group upload_video_area" >
  71. <label for="input-file" class="col-sm-2 control-label"></label>
  72. <div class="col-md-6 col-sm-10">
  73. <audio id="audio" controls="" style="display: none;"></audio>
  74. </div>
  75. </div>
  76. </fieldset>
  77. <div class="form-group">
  78. <div class="col-sm-offset-2 col-sm-10">
  79. <button type="submit" class="btn btn-primary js-ajax-submit" id="submit">{:lang('EDIT')}</button>
  80. <a class="btn btn-default" href="{:url('Music/index')}">{:lang('BACK')}</a>
  81. </div>
  82. </div>
  83. </form>
  84. </div>
  85. <script src="__STATIC__/js/admin.js"></script>
  86. <script type="text/javascript" src="__STATIC__/layer/layer.js"></script>
  87. <script type="text/javascript">
  88. $(function () {
  89. $("#upfile").change(function () {
  90. $('#submit').removeAttr("disabled");
  91. //获取文件类型
  92. var a=$("#upfile").val();
  93. var arr=a.split('.');
  94. var type=arr[arr.length-1];
  95. if(type.toLowerCase()!="mp3"){
  96. layer.msg("请上传MP3格式文件");
  97. $("#submit").attr("disabled","true");
  98. return;
  99. }
  100. var objUrl = getObjectURL(this.files[0]);
  101. $("#audio").attr("src", objUrl);
  102. $("#audio")[0].play();
  103. $("#audio").show();
  104. getTime();
  105. });
  106. });
  107. //获取mp3文件的时间 兼容浏览器
  108. function getTime() {
  109. setTimeout(function () {
  110. var duration = $("#audio")[0].duration;
  111. if(isNaN(duration)){
  112. getTime();
  113. }
  114. else{
  115. //console.log($("#audio")[0]);
  116. // console.info("该歌曲的总时间为:"+$("#audio")[0].duration+"秒");
  117. var length=Math.floor($("#audio")[0].duration); //获取音乐长度
  118. if(length<15){ //长度小于15秒
  119. layer.msg('音乐长度不能低于15秒');
  120. $("#submit").attr("disabled","true");
  121. }
  122. var len_str="00:00";
  123. if(length>60){
  124. var minute=Math.floor(length/60);
  125. var second=length%60;
  126. if(minute<10){
  127. minute="0"+minute;
  128. }
  129. if(second<10){
  130. second="0"+second;
  131. }
  132. len_str=minute+":"+second;
  133. }else{
  134. len_str="00:"+length;
  135. }
  136. //console.log(len_str);
  137. $("#length").val(len_str);
  138. }
  139. }, 50);
  140. }
  141. //把文件转换成可读URL
  142. function getObjectURL(file) {
  143. var url = null;
  144. if (window.createObjectURL != undefined) { // basic
  145. url = window.createObjectURL(file);
  146. } else if (window.URL != undefined) { // mozilla(firefox)
  147. url = window.URL.createObjectURL(file);
  148. } else if (window.webkitURL != undefined) { // webkit or chrome
  149. url = window.webkitURL.createObjectURL(file);
  150. }
  151. return url;
  152. }
  153. </script>
  154. </body>
  155. </html>