music_add.html 6.3 KB

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