neditor本地上传音频一

上一篇上传视频
首先需要你查看前两章上传图片与视频，只有对这两章有了一定的了解才能去增加音频上传，我先贴两张成功的图片：

好了，这是修改成功后的一套流程操作，改的东西实在太多，导致我回头找的时候也忘记了自己改动的代码是哪一块（这应该是程序员的通病吧，脑子不够用啊…），就不去一一赘述了，这里直接给代码，完全复制了一套video的代码：

修改后的代码：
audio.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title></title><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/><script type="text/javascript" src="../internal.js"></script><link rel="stylesheet" type="text/css" href="audio.css" />
</head>
<body>
<div class="wrapper"><div id="videoTab"><div id="tabHeads" class="tabhead"><span tabSrc="video" class="focus" data-content-id="video"><var id="lang_tab_insertV"></var></span><span tabSrc="upload" data-content-id="upload"><var id="lang_tab_uploadV"></var></span></div><div id="tabBodys" class="tabbody"><div id="video" class="panel focus"><table><tr><td><label for="videoUrl" class="url"><var id="lang_video_url"></var></label></td><td><input id="videoUrl" type="text"></td></tr></table><div id="preview"></div><div id="videoInfo"><!--  <fieldset><legend><var id="lang_video_size"></var></legend><table><tr><td><label for="videoWidth"><var id="lang_videoW"></var></label></td><td><input class="txt" id="videoWidth" type="text"/></td></tr><tr><td><label for="videoHeight"><var id="lang_videoH"></var></label></td><td><input class="txt" id="videoHeight" type="text"/></td></tr></table></fieldset> --><fieldset><legend><var id="lang_alignment"></var></legend><div id="videoFloat"></div></fieldset></div></div><div id="upload" class="panel"><div id="upload_left"><div id="queueList" class="queueList"><div class="statusBar element-invisible"><div class="progress"><span class="text">0%</span><span class="percentage"></span></div><div class="info"></div><div class="btns"><div id="filePickerBtn"></div><div class="uploadBtn"><var id="lang_start_upload"></var></div></div></div><div id="dndArea" class="placeholder"><div class="filePickerContainer"><div id="filePickerReady"></div></div></div><ul class="filelist element-invisible"><li id="filePickerBlock" class="filePickerBlock"></li></ul></div></div><div id="uploadVideoInfo"><!--  <fieldset><legend><var id="lang_upload_size"></var></legend><table><tr><td><label><var id="lang_upload_width"></var></label></td><td><input class="txt" id="upload_width" type="text"/></td></tr><tr><td><label><var id="lang_upload_height"></var></label></td><td><input class="txt" id="upload_height" type="text"/></td></tr></table></fieldset> --><fieldset><legend><var id="lang_upload_alignment"></var></legend><div id="upload_alignment"></div></fieldset></div></div></div></div>
</div><!-- jquery -->
<script type="text/javascript" src="../../third-party/jquery-1.10.2.min.js"></script><!-- webuploader -->
<script type="text/javascript" src="../../third-party/webuploader/webuploader.js"></script>
<link rel="stylesheet" type="text/css" href="../../third-party/webuploader/webuploader.css">
<!-- video -->
<script type="text/javascript" src="audio.js"></script>
</body>
</html>

audio.css

@charset "utf-8";
.wrapper{width: 600px;padding: 0 20px;_width: 575px;margin: 10px auto;zoom: 1;position: relative;
}
.tabbody{height: 390px;}
.tabbody .panel {position: absolute;width: 0;height: 0;background: #fff;overflow: hidden;display: none;
}
.tabbody .panel.focus {width: 100%;height: 406px;display: block;
}.tabbody .panel table td{vertical-align: middle;}
#videoUrl {width: 520px;height: 28px;line-height: 28px;margin: 18px 0 18px 15px;background: #FFF;border: 1px solid #d7d7d7;border-radius: 4px;
}
#videoSearchTxt{margin-left:15px;background: #FFF;width:200px;height:21px;line-height:21px;border: 1px solid #d7d7d7;}
#searchList{width: 570px;overflow: auto;zoom:1;height: 270px;}
#searchList div{float: left;width: 120px;height: 135px;margin: 5px 15px;}
#searchList img{margin: 2px 8px;cursor: pointer;border: 2px solid #fff} /*不用缩略图*/
#searchList p{margin-left: 10px;}
#videoType{width: 65px;height: 23px;line-height: 22px;border: 1px solid #d7d7d7;
}
#videoSearchBtn,#videoSearchReset{/*width: 80px;*/height: 25px;line-height: 25px;background: #eee;border: 1px solid #d7d7d7;cursor: pointer;padding: 0 5px;
}#preview{position: relative;width: 432px;padding:0;overflow: hidden; margin-left: 10px; height: 320px;background-color: #f3f3f3;float: left}
#preview .previewMsg {position:absolute;top:0;margin:0;padding:0;height:304px;width:100%;background-color: #ddd;padding-top: 14px}
#preview .previewMsg span{display:block;margin: 125px auto 0 auto;text-align:center;font-size:18px;color:#fff;}
#preview .previewAudio {position:absolute;top:0;margin:0;padding:0;height:160px;width:100%;}
.edui-video-wrapper fieldset{border: 1px solid #ddd;padding-left: 5px;margin-bottom: 20px;padding-bottom: 5px;width: 115px;
}#videoInfo {width: 120px;float: left;margin-left: 27px;}
fieldset{border: 1px solid #ddd;padding-left: 5px;margin-bottom: 20px;padding-bottom: 5px;width: 115px;
}
fieldset legend{font-weight: bold;}
fieldset p{line-height: 30px;}
fieldset input.txt{width: 65px;height: 21px;line-height: 21px;margin: 8px 5px;background: #FFF;border: 1px solid #d7d7d7;
}
label.url{font-weight: bold;margin-left: 5px;color: #666;}
#videoFloat div{cursor:pointer;opacity: 0.5;filter: alpha(opacity = 50);margin:9px;_margin:5px;width:38px;height:36px;float:left;}
#videoFloat .focus{opacity: 1;filter: alpha(opacity = 100)}
span.view{display: inline-block;width: 30px;float: right;cursor: pointer;color: blue}/* upload video */
.tabbody #upload.panel {width: 0;height: 0;overflow: hidden;position: absolute !important;clip: rect(1px, 1px, 1px, 1px);background: #fff;display: block;
}
.tabbody #upload.panel.focus {width: 100%;height: 390px;display: block;clip: auto;
}
#upload_alignment div{cursor:pointer;opacity: 0.5;filter: alpha(opacity = 50);margin:9px;_margin:5px;width:38px;height:36px;float:left;}
#upload_alignment .focus{opacity: 1;filter: alpha(opacity = 100)}
#upload_left { width:427px; float:left; }
#upload_left .controller { height: 30px; clear: both; }
#uploadVideoInfo{margin-top:10px;float:right;padding-right:8px;}#upload .queueList {margin: 0;
}#upload p {margin: 0;
}.element-invisible {width: 0 !important;height: 0 !important;border: 0;padding: 0;margin: 0;overflow: hidden;position: absolute !important;clip: rect(1px, 1px, 1px, 1px);
}#upload .placeholder {margin-top: 20px;margin-right: 0;height: 220px;padding-top: 150px;text-align: center;width: 100%;float: left;/*background: url(./images/image.png) center 70px no-repeat #f3f3f3;*/background-color: #f3f3f3;color: #cccccc;font-size: 18px;position: relative;top:0;*margin-left: 0;*left: 10px;
}#upload .placeholder .webuploader-pick {font-size: 16px;background: #f3f3f3;border-radius: 3px;line-height: 44px;padding: 0 30px;color: #646464;display: inline-block;margin: 0 auto 20px auto;cursor: pointer;/* box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); */border: 1px solid #ccc;
}#upload .placeholder .webuploader-pick-hover {border: 1px solid #00a2d4;color: #00a2d4;
}#filePickerContainer {text-align: center;
}#upload .placeholder .flashTip {color: #666666;font-size: 12px;position: absolute;width: 100%;text-align: center;bottom: 20px;
}#upload .placeholder .flashTip a {color: #0785d1;text-decoration: none;
}#upload .placeholder .flashTip a:hover {text-decoration: underline;
}#upload .placeholder.webuploader-dnd-over {border-color: #999999;
}#upload .filelist {list-style: none;margin: 0;padding: 0;overflow-x: hidden;overflow-y: auto;position: relative;height: 285px;
}#upload .filelist:after {content: '';display: block;width: 0;height: 0;overflow: hidden;clear: both;
}#upload .filelist li {width: 113px;height: 113px;background: url(./images/bg.png);text-align: center;margin: 15px 0 0 20px;*margin: 15px 0 0 15px;position: relative;display: block;float: left;overflow: hidden;font-size: 12px;
}#upload .filelist li p.log {position: relative;top: -45px;
}#upload .filelist li p.title {position: absolute;top: 0;left: 0;width: 100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;top: 5px;text-indent: 5px;text-align: left;
}#upload .filelist li p.progress {position: absolute;width: 100%;bottom: 0;left: 0;height: 8px;overflow: hidden;z-index: 50;margin: 0;border-radius: 0;background: none;-webkit-box-shadow: 0 0 0;
}#upload .filelist li p.progress span {display: none;overflow: hidden;width: 0;height: 100%;background: #1483d8 url(./images/progress.png) repeat-x;-webit-transition: width 200ms linear;-moz-transition: width 200ms linear;-o-transition: width 200ms linear;-ms-transition: width 200ms linear;transition: width 200ms linear;-webkit-animation: progressmove 2s linear infinite;-moz-animation: progressmove 2s linear infinite;-o-animation: progressmove 2s linear infinite;-ms-animation: progressmove 2s linear infinite;animation: progressmove 2s linear infinite;-webkit-transform: translateZ(0);
}@-webkit-keyframes progressmove {0% {background-position: 0 0;}100% {background-position: 17px 0;}
}@-moz-keyframes progressmove {0% {background-position: 0 0;}100% {background-position: 17px 0;}
}@keyframes progressmove {0% {background-position: 0 0;}100% {background-position: 17px 0;}
}#upload .filelist li p.imgWrap {position: relative;z-index: 2;line-height: 113px;vertical-align: middle;overflow: hidden;width: 113px;height: 113px;-webkit-transform-origin: 50% 50%;-moz-transform-origin: 50% 50%;-o-transform-origin: 50% 50%;-ms-transform-origin: 50% 50%;transform-origin: 50% 50%;-webit-transition: 200ms ease-out;-moz-transition: 200ms ease-out;-o-transition: 200ms ease-out;-ms-transition: 200ms ease-out;transition: 200ms ease-out;
}
#upload .filelist li p.imgWrap.notimage {margin-top: 0;width: 111px;height: 111px;border: 1px #eeeeee solid;
}
#upload .filelist li p.imgWrap.notimage i.file-preview {margin-top: 15px;
}#upload .filelist li img {width: 100%;
}#upload .filelist li p.error {background: #f43838;color: #fff;position: absolute;bottom: 0;left: 0;height: 28px;line-height: 28px;width: 100%;z-index: 100;display:none;
}#upload .filelist li .success {display: block;position: absolute;left: 0;bottom: 0;height: 40px;width: 100%;z-index: 200;background: url(./images/success.png) no-repeat right bottom;background-image: url(./images/success.gif) \9;
}#upload .filelist li.filePickerBlock {width: 113px;height: 113px;background: url(../fonts/images/addfile.svg) no-repeat center;border: 1px solid #eeeeee;border-radius: 0;
}
#upload .filelist li.filePickerBlock div.webuploader-pick  {width: 100%;height: 100%;margin: 0;padding: 0;opacity: 0;background: none;font-size: 0;
}#upload .filelist div.file-panel {position: absolute;height: 0;filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#80000000', endColorstr='#80000000') \0;background: rgba(0, 0, 0, 0.5);width: 100%;top: 0;left: 0;overflow: hidden;z-index: 300;
}#upload .filelist div.file-panel span {width: 24px;height: 24px;display: inline;float: right;text-indent: -9999px;overflow: hidden;background: url(./images/icons.png) no-repeat;background: url(./images/icons.gif) no-repeat \9;margin: 5px 1px 1px;cursor: pointer;-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;
}#upload .filelist div.file-panel span.rotateLeft {display:none;background-position: 0 -24px;
}#upload .filelist div.file-panel span.rotateLeft:hover {background-position: 0 0;
}#upload .filelist div.file-panel span.rotateRight {display:none;background-position: -24px -24px;
}#upload .filelist div.file-panel span.rotateRight:hover {background-position: -24px 0;
}#upload .filelist div.file-panel span.cancel {background-position: -48px -24px;
}#upload .filelist div.file-panel span.cancel:hover {background-position: -48px 0;
}#upload .statusBar {height: 45px;border-bottom: 1px solid #dadada;margin: 0 10px;padding: 0;line-height: 45px;vertical-align: middle;position: relative;
}#upload .statusBar .progress {border: 1px solid #1483d8;width: 198px;background: #fff;height: 18px;position: absolute;top: 12px;display: none;text-align: center;line-height: 18px;color: #6dbfff;margin: 0 10px 0 0;border-radius: 2px;
}
#upload .statusBar .progress span.percentage {width: 0;height: 100%;left: 0;top: 0;background: #1483d8;position: absolute;
}
#upload .statusBar .progress span.text {position: relative;z-index: 10;
}#upload .statusBar .info {display: inline-block;font-size: 14px;color: #666666;
}#upload .statusBar .btns {position: absolute;top: 7px;right: 0;line-height: 30px;
}#filePickerBtn {display: inline-block;float: left;
}
#upload .statusBar .btns .webuploader-pick,
#upload .statusBar .btns .uploadBtn,
#upload .statusBar .btns .uploadBtn.state-uploading,
#upload .statusBar .btns .uploadBtn.state-paused {background: #ffffff;border: 1px solid #cfcfcf;color: #565656;padding: 0 18px;display: inline-block;border-radius: 3px;margin-left: 10px;cursor: pointer;font-size: 14px;float: left;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;
}
#upload .statusBar .btns .webuploader-pick-hover,
#upload .statusBar .btns .uploadBtn:hover,
#upload .statusBar .btns .uploadBtn.state-uploading:hover,
#upload .statusBar .btns .uploadBtn.state-paused:hover {background: #f0f0f0;
}#upload .statusBar .btns .uploadBtn,
#upload .statusBar .btns .uploadBtn.state-paused{background: #00b7ee;color: #fff;border-color: transparent;
}
#upload .statusBar .btns .uploadBtn:hover,
#upload .statusBar .btns .uploadBtn.state-paused:hover{background: #00a2d4;
}#upload .statusBar .btns .uploadBtn.disabled {pointer-events: none;filter:alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity: 0.6;opacity: 0.6;
}/* 在线文件的文件预览图标 */
i.file-preview {display: block;margin: 10px auto;width: 70px;height: 70px;background-image: url("./images/file-icons.png");background-image: url("./images/file-icons.gif") \9;background-position: -140px center;background-repeat: no-repeat;
}
i.file-preview.file-type-dir{background-position: 0 center;
}
i.file-preview.file-type-file{background-position: -140px center;
}
i.file-preview.file-type-filelist{background-position: -210px center;
}
i.file-preview.file-type-zip,
i.file-preview.file-type-rar,
i.file-preview.file-type-7z,
i.file-preview.file-type-tar,
i.file-preview.file-type-gz,
i.file-preview.file-type-bz2{background-position: -280px center;
}
i.file-preview.file-type-xls,
i.file-preview.file-type-xlsx{background-position: -350px center;
}
i.file-preview.file-type-doc,
i.file-preview.file-type-docx{background-position: -420px center;
}
i.file-preview.file-type-ppt,
i.file-preview.file-type-pptx{background-position: -490px center;
}
i.file-preview.file-type-vsd{background-position: -560px center;
}
i.file-preview.file-type-pdf{background-position: -630px center;
}
i.file-preview.file-type-txt,
i.file-preview.file-type-md,
i.file-preview.file-type-json,
i.file-preview.file-type-htm,
i.file-preview.file-type-xml,
i.file-preview.file-type-html,
i.file-preview.file-type-js,
i.file-preview.file-type-css,
i.file-preview.file-type-php,
i.file-preview.file-type-jsp,
i.file-preview.file-type-asp{background-position: -700px center;
}
i.file-preview.file-type-apk{background-position: -770px center;
}
i.file-preview.file-type-exe{background-position: -840px center;
}
i.file-preview.file-type-ipa{background-position: -910px center;
}
i.file-preview.file-type-mp4,
i.file-preview.file-type-swf,
i.file-preview.file-type-mkv,
i.file-preview.file-type-avi,
i.file-preview.file-type-flv,
i.file-preview.file-type-mov,
i.file-preview.file-type-mpg,
i.file-preview.file-type-mpeg,
i.file-preview.file-type-ogv,
i.file-preview.file-type-webm,
i.file-preview.file-type-rm,
i.file-preview.file-type-rmvb{background-position: -980px center;
}
i.file-preview.file-type-ogg,
i.file-preview.file-type-wav,
i.file-preview.file-type-wmv,
i.file-preview.file-type-mid,
i.file-preview.file-type-mp3{background-position: -1050px center;
}
i.file-preview.file-type-jpg,
i.file-preview.file-type-jpeg,
i.file-preview.file-type-gif,
i.file-preview.file-type-bmp,
i.file-preview.file-type-png,
i.file-preview.file-type-psd{background-position: -140px center;
}

audio.js

/*** Created by JetBrains PhpStorm.* User: taoqili* Date: 12-2-20* Time: 上午11:19* To change this template use File | Settings | File Templates.*/(function(){var video = {},uploadVideoList = [],isModifyUploadVideo = false,uploadFile;window.onload = function(){$focus($G("videoUrl"));initTabs();initVideo();initUpload();
//        initButtons();};//初始化onok事件 function initButtons() {dialog.onok = function () {var remote = false, list = [], id, tabs = $G('tabHeads').children;for (var i = 0; i < tabs.length; i++) {if (domUtils.hasClass(tabs[i], 'focus')) {id = tabs[i].getAttribute('data-content-id');break;}}switch (id) {case 'upload':list = uploadFile.getInsertList();var count = uploadFile.getQueueCount();if (count) {$('.info', '#queueList').html('<span style="color:red;">' + '还有2个未上传文件'.replace(/[\d]/, count) + '</span>');return false;}break;}if(list) {editor.execCommand('insertimage', list);remote && editor.fireEvent("catchRemoteImage");}};}/* 初始化tab标签 */function initTabs(){var tabs = $G('tabHeads').children;for (var i = 0; i < tabs.length; i++) {domUtils.on(tabs[i], "click", function (e) {var j, bodyId, target = e.target || e.srcElement;for (j = 0; j < tabs.length; j++) {bodyId = tabs[j].getAttribute('data-content-id');if(tabs[j] == target){domUtils.addClass(tabs[j], 'focus');domUtils.addClass($G(bodyId), 'focus');}else {domUtils.removeClasses(tabs[j], 'focus');domUtils.removeClasses($G(bodyId), 'focus');}}});}}function initVideo(){createAlignButton( ["videoFloat", "upload_alignment"] );addUrlChangeListener($G("videoUrl"));addOkListener();//编辑视频时初始化相关信息(function(){var img = editor.selection.getRange().getClosedNode(),url;if(img && img.className){var hasFakedClass = img.className.indexOf("edui-faked-video")!=-1,hasUploadClass = img.className.indexOf("edui-upload-video")!=-1;if(hasFakedClass || hasUploadClass) {$G("videoUrl").value = url = img.getAttribute("_url");/*$G("videoWidth").value = img.width;$G("videoHeight").value = img.height;*/var align = domUtils.getComputedStyle(img,"float"),parentAlign = domUtils.getComputedStyle(img.parentNode,"text-align");updateAlignButton(parentAlign==="center"?"center":align);}if(hasUploadClass) {isModifyUploadVideo = true;}}createPreviewVideo(url);})();}/*** 监听确认和取消两个按钮事件，用户执行插入或者清空正在播放的视频实例操作*/function addOkListener(){dialog.onok = function(){$G("preview").innerHTML = "";var currentTab =  findFocus("tabHeads","tabSrc");switch(currentTab){case "video":return insertSingle();break;case "videoSearch":return insertSearch("searchList");break;case "upload":return insertUpload();break;}};dialog.oncancel = function(){$G("preview").innerHTML = "";};}/*** 依据传入的align值更新按钮信息* @param align*/function updateAlignButton( align ) {var aligns = $G( "videoFloat" ).children;for ( var i = 0, ci; ci = aligns[i++]; ) {if ( ci.getAttribute( "name" ) == align ) {if ( ci.className !="focus" ) {ci.className = "focus";}} else {if ( ci.className =="focus" ) {ci.className = "";}}}}/*** 将单个视频信息插入编辑器中*/function insertSingle(){var width = $G("videoWidth"),height = $G("videoHeight"),url=$G('videoUrl').value,align = findFocus("videoFloat","name");var newurl = convert_url(url);if (newurl.startsWith("<embed>")) {var arr = newurl.split(" ");for (var i=0; i>arr.length; i++) {if (arr[i].startsWith("src")) {newurl = arr[i].replace("src=", "");}if (arr[i].startsWith("width")) {if (!width) {width = arr[i].replace("width=", "");}}if (arr[i].startsWith("height")) {if (!height) {height = arr[i].replace("height=", "");}}}}if(!newurl) return false;if ( !checkNum( [width, height] ) ) return false;editor.execCommand('insertvideo', {url: newurl,width: 420,height: 100,align: align}, isModifyUploadVideo ? 'upload':null);}/*** 将元素id下的所有代表视频的图片插入编辑器中* @param id*/function insertSearch(id){var imgs = domUtils.getElementsByTagName($G(id),"img"),videoObjs=[];for(var i=0,img; img=imgs[i++];){if(img.getAttribute("selected")){videoObjs.push({url:img.getAttribute("ue_video_url"),width:420,height:280,align:"none"});}}editor.execCommand('insertvideo',videoObjs);}/*** 找到id下具有focus类的节点并返回该节点下的某个属性* @param id* @param returnProperty*/function findFocus( id, returnProperty ) {var tabs = $G( id ).children,property;for ( var i = 0, ci; ci = tabs[i++]; ) {if ( ci.className=="focus" ) {property = ci.getAttribute( returnProperty );break;}}return property;}function convert_url(url){if ( !url ) return '';url = utils.trim(url).replace(/v\.youku\.com\/v_show\/id_([\w\-=]+)\.html/i, 'player.youku.com/player.php/sid/$1/v.swf').replace(/(www\.)?youtube\.com\/watch\?v=([\w\-]+)/i, "www.youtube.com/v/$2").replace(/youtu.be\/(\w+)$/i, "www.youtube.com/v/$1").replace(/v\.ku6\.com\/.+\/([\w\.]+)\.html.*$/i, "player.ku6.com/refer/$1/v.swf").replace(/www\.56\.com\/u\d+\/v_([\w\-]+)\.html/i, "player.56.com/v_$1.swf").replace(/www.56.com\/w\d+\/play_album\-aid\-\d+_vid\-([^.]+)\.html/i, "player.56.com/v_$1.swf").replace(/v\.pps\.tv\/play_([\w]+)\.html.*$/i, "player.pps.tv/player/sid/$1/v.swf").replace(/www\.letv\.com\/ptv\/vplay\/([\d]+)\.html.*$/i, "i7.imgs.letv.com/player/swfPlayer.swf?id=$1&autoplay=0").replace(/www\.tudou\.com\/programs\/view\/([\w\-]+)\/?/i, "www.tudou.com/v/$1").replace(/v\.qq\.com\/cover\/[\w]+\/[\w]+\/([\w]+)\.html/i, "static.video.qq.com/TPout.swf?vid=$1").replace(/v\.qq\.com\/.+[\?\&]vid=([^&]+).*$/i, "static.video.qq.com/TPout.swf?vid=$1").replace(/my\.tv\.sohu\.com\/[\w]+\/[\d]+\/([\d]+)\.shtml.*$/i, "share.vrs.sohu.com/my/v.swf&id=$1");return url;}/*** 检测传入的所有input框中输入的长宽是否是正数* @param nodes input框集合，*/function checkNum( nodes ) {for ( var i = 0, ci; ci = nodes[i++]; ) {var value = ci.value;if ( !isNumber( value ) && value) {alert( lang.numError );ci.value = "";ci.focus();return false;}}return true;}/*** 数字判断* @param value*/function isNumber( value ) {return /(0|^[1-9]\d*$)/.test( value );}/*** 创建图片浮动选择按钮* @param ids*/function createAlignButton( ids ) {for ( var i = 0, ci; ci = ids[i++]; ) {var floatContainer = $G( ci ),nameMaps = {"none":lang['default'], "left":lang.floatLeft, "right":lang.floatRight, "center":lang.block};for ( var j in nameMaps ) {var div = document.createElement( "div" );div.setAttribute( "name", j );if ( j == "none" ) div.className="focus";div.style.cssText = "background:url(images/" + j + "_focus.jpg);";div.setAttribute( "title", nameMaps[j] );floatContainer.appendChild( div );}switchSelect( ci );}}/*** 选择切换* @param selectParentId*/function switchSelect( selectParentId ) {var selects = $G( selectParentId ).children;for ( var i = 0, ci; ci = selects[i++]; ) {domUtils.on( ci, "click", function () {for ( var j = 0, cj; cj = selects[j++]; ) {cj.className = "";cj.removeAttribute && cj.removeAttribute( "class" );}this.className = "focus";} )}}/*** 监听url改变事件* @param url*/function addUrlChangeListener(url){if (browser.ie) {url.onpropertychange = function () {createPreviewVideo( this.value );}} else {url.addEventListener( "input", function () {createPreviewVideo( this.value );}, false );}}/*** 根据url生成视频预览* @param url*/function createPreviewVideo(url){if ( !url ) return;var audioType = (editor.getOpt('audioAllowFiles') || []).join(',');if (url.startsWith("http") && audioType.indexOf(url.substr(url.lastIndexOf('.') + 1)) != -1) {$G("preview").innerHTML = '<div class="previewMsg"></div>'+'<audio class="previewAudio"' +' src="' + url + '"' +' play="true" loop="false" data-setup="{}" controls="controls" preload="auto">' +'</audio>';}if (url.startsWith("<embed>")) {$G("preview").innerHTML = '<div class="previewMsg"><span>'+lang.urlError+'</span></div>'+url;}}/* 插入上传视频 */function insertUpload(){var videoObjs=[],uploadVideoList = uploadFile.getInsertList();uploadDir = editor.getOpt('videoUrlPrefix'),width = 420,height = 100,align = findFocus("upload_alignment","name") || 'none';for(var key in uploadVideoList) {var file = uploadVideoList[key];videoObjs.push({url: uploadDir + file.src,width:width,height:height,align:align});}var count = uploadFile.getQueueCount();if (count) {$('.info', '#queueList').html('<span style="color:red;">' + '还有2个未上传文件'.replace(/[\d]/, count) + '</span>');return false;} else {editor.execCommand('insertvideo', videoObjs, 'upload');}}/*初始化上传标签*/function initUpload(){uploadFile = new UploadFile('queueList');}/* 上传附件 */function UploadFile(target) {this.$wrap = target.constructor == String ? $('#' + target) : $(target);this.init();}UploadFile.prototype = {init: function () {this.fileList = [];this.initContainer();this.initUploader();},initContainer: function () {this.$queue = this.$wrap.find('.filelist');},/* 初始化容器 */initUploader: function () {var _this = this,$ = jQuery,    // just in case. Make sure it's not an other libaray.$wrap = _this.$wrap,// 图片容器$queue = $wrap.find('.filelist'),// 状态栏，包括进度和控制按钮$statusBar = $wrap.find('.statusBar'),// 文件总体选择信息。$info = $statusBar.find('.info'),// 上传按钮$upload = $wrap.find('.uploadBtn'),// 上传按钮$filePickerBtn = $wrap.find('.filePickerBtn'),// 上传按钮$filePickerBlock = $wrap.find('.filePickerBlock'),// 没选择文件之前的内容。$placeHolder = $wrap.find('.placeholder'),// 总体进度条$progress = $statusBar.find('.progress').hide(),// 添加的文件数量fileCount = 0,// 添加的文件总大小fileSize = 0,// 优化retina, 在retina下这个值是2ratio = window.devicePixelRatio || 1,// 缩略图大小thumbnailWidth = 113 * ratio,thumbnailHeight = 113 * ratio,// 可能有pedding, ready, uploading, confirm, done.state = '',// 所有文件的进度信息，key为file idpercentages = {},supportTransition = (function () {var s = document.createElement('p').style,r = 'transition' in s ||'WebkitTransition' in s ||'MozTransition' in s ||'msTransition' in s ||'OTransition' in s;s = null;return r;})(),// WebUploader实例uploader,actionUrl = editor.getActionUrl(editor.getOpt('audioActionName')),fileMaxSize = editor.getOpt('videoMaxSize'),acceptExtensions = (editor.getOpt('audioAllowFiles') || []).join('').replace(/\./g, ',').replace(/^[,]/, '');;if (!WebUploader.Uploader.support()) {$('#filePickerReady').after($('<div>').html(lang.errorNotSupport)).hide();return;} else if (!editor.getOpt('audioActionName')) {$('#filePickerReady').after($('<div>').html(lang.errorLoadConfig)).hide();return;}uploader = _this.uploader = WebUploader.create({pick: {id: '#filePickerReady',label: lang.uploadSelectFile},swf: '../../third-party/webuploader/Uploader.swf',server: actionUrl,fileVal: editor.getOpt('videoFieldName'),duplicate: true,fileSingleSizeLimit: fileMaxSize,compress: false});uploader.addButton({id: '#filePickerBlock'});uploader.addButton({id: '#filePickerBtn',label: lang.uploadAddFile});setState('pedding');// 当有文件添加进来时执行，负责view的创建function addFile(file) {var $li = $('<li id="' + file.id + '">' +'<p class="title">' + file.name + '</p>' +'<p class="imgWrap"></p>' +'<p class="progress"><span></span></p>' +'</li>'),$btns = $('<div class="file-panel">' +'<span class="cancel">' + lang.uploadDelete + '</span>' +'<span class="rotateRight">' + lang.uploadTurnRight + '</span>' +'<span class="rotateLeft">' + lang.uploadTurnLeft + '</span></div>').appendTo($li),$prgress = $li.find('p.progress span'),$wrap = $li.find('p.imgWrap'),$info = $('<p class="error"></p>').hide().appendTo($li),showError = function (code) {switch (code) {case 'exceed_size':text = lang.errorExceedSize;break;case 'interrupt':text = lang.errorInterrupt;break;case 'http':text = lang.errorHttp;break;case 'not_allow_type':text = lang.errorFileType;break;default:text = lang.errorUploadRetry;break;}$info.text(text).show();};if (file.getStatus() === 'invalid') {showError(file.statusText);} else {$wrap.text(lang.uploadPreview);if ('|png|jpg|jpeg|bmp|gif|'.indexOf('|'+file.ext.toLowerCase()+'|') == -1) {$wrap.empty().addClass('notimage').append('<i class="file-preview file-type-' + file.ext.toLowerCase() + '"></i>' +'<span class="file-title">' + file.name + '</span>');} else {if (browser.ie && browser.version <= 7) {$wrap.text(lang.uploadNoPreview);} else {uploader.makeThumb(file, function (error, src) {if (error || !src || (/^data:/.test(src) && browser.ie && browser.version <= 7)) {$wrap.text(lang.uploadNoPreview);} else {var $img = $('<img src="' + src + '">');$wrap.empty().append($img);$img.on('error', function () {$wrap.text(lang.uploadNoPreview);});}}, thumbnailWidth, thumbnailHeight);}}percentages[ file.id ] = [ file.size, 0 ];file.rotation = 0;/* 检查文件格式 */if (!file.ext || acceptExtensions.indexOf(file.ext.toLowerCase()) == -1) {showError('not_allow_type');uploader.removeFile(file);}}file.on('statuschange', function (cur, prev) {if (prev === 'progress') {$prgress.hide().width(0);} else if (prev === 'queued') {$li.off('mouseenter mouseleave');$btns.remove();}// 成功if (cur === 'error' || cur === 'invalid') {showError(file.statusText);percentages[ file.id ][ 1 ] = 1;} else if (cur === 'interrupt') {showError('interrupt');} else if (cur === 'queued') {percentages[ file.id ][ 1 ] = 0;} else if (cur === 'progress') {$info.hide();$prgress.css('display', 'block');} else if (cur === 'complete') {}$li.removeClass('state-' + prev).addClass('state-' + cur);});$li.on('mouseenter', function () {$btns.stop().animate({height: 30});});$li.on('mouseleave', function () {$btns.stop().animate({height: 0});});$btns.on('click', 'span', function () {var index = $(this).index(),deg;switch (index) {case 0:uploader.removeFile(file);return;case 1:file.rotation += 90;break;case 2:file.rotation -= 90;break;}if (supportTransition) {deg = 'rotate(' + file.rotation + 'deg)';$wrap.css({'-webkit-transform': deg,'-mos-transform': deg,'-o-transform': deg,'transform': deg});} else {$wrap.css('filter', 'progid:DXImageTransform.Microsoft.BasicImage(rotation=' + (~~((file.rotation / 90) % 4 + 4) % 4) + ')');}});$li.insertBefore($filePickerBlock);}// 负责view的销毁function removeFile(file) {var $li = $('#' + file.id);delete percentages[ file.id ];updateTotalProgress();$li.off().find('.file-panel').off().end().remove();}function updateTotalProgress() {var loaded = 0,total = 0,spans = $progress.children(),percent;$.each(percentages, function (k, v) {total += v[ 0 ];loaded += v[ 0 ] * v[ 1 ];});percent = total ? loaded / total : 0;spans.eq(0).text(Math.round(percent * 100) + '%');spans.eq(1).css('width', Math.round(percent * 100) + '%');updateStatus();}function setState(val, files) {if (val != state) {var stats = uploader.getStats();$upload.removeClass('state-' + state);$upload.addClass('state-' + val);switch (val) {/* 未选择文件 */case 'pedding':$queue.addClass('element-invisible');$statusBar.addClass('element-invisible');$placeHolder.removeClass('element-invisible');$progress.hide(); $info.hide();uploader.refresh();break;/* 可以开始上传 */case 'ready':$placeHolder.addClass('element-invisible');$queue.removeClass('element-invisible');$statusBar.removeClass('element-invisible');$progress.hide(); $info.show();$upload.text(lang.uploadStart);uploader.refresh();break;/* 上传中 */case 'uploading':$progress.show(); $info.hide();$upload.text(lang.uploadPause);break;/* 暂停上传 */case 'paused':$progress.show(); $info.hide();$upload.text(lang.uploadContinue);break;case 'confirm':$progress.show(); $info.hide();$upload.text(lang.uploadStart);stats = uploader.getStats();if (stats.successNum && !stats.uploadFailNum) {setState('finish');return;}break;case 'finish':$progress.hide(); $info.show();if (stats.uploadFailNum) {$upload.text(lang.uploadRetry);} else {$upload.text(lang.uploadStart);}break;}state = val;updateStatus();}if (!_this.getQueueCount()) {$upload.addClass('disabled')} else {$upload.removeClass('disabled')}}function updateStatus() {var text = '', stats;if (state === 'ready') {text = lang.updateStatusReady.replace('_', fileCount).replace('_KB', WebUploader.formatSize(fileSize));} else if (state === 'confirm') {stats = uploader.getStats();if (stats.uploadFailNum) {text = lang.updateStatusConfirm.replace('_', stats.successNum).replace('_', stats.successNum);}} else {stats = uploader.getStats();text = lang.updateStatusFinish.replace('_', fileCount).replace('_KB', WebUploader.formatSize(fileSize)).replace('_', stats.successNum);if (stats.uploadFailNum) {text += lang.updateStatusError.replace('_', stats.uploadFailNum);}}$info.html(text);}uploader.on('fileQueued', function (file) {/* 选择文件后设置上传相关的url和自定义参数 */editor.getOpt("videoUploadService")(_this, editor).setUploadData(file);fileCount++;fileSize += file.size;if (fileCount === 1) {$placeHolder.addClass('element-invisible');$statusBar.show();}addFile(file);});uploader.on('fileDequeued', function (file) {fileCount--;fileSize -= file.size;removeFile(file);updateTotalProgress();});uploader.on('filesQueued', function (file) {if (!uploader.isInProgress() && (state == 'pedding' || state == 'finish' || state == 'confirm' || state == 'ready')) {setState('ready');}updateTotalProgress();});uploader.on('all', function (type, files) {switch (type) {case 'uploadFinished':setState('confirm', files);break;case 'startUpload':/* 添加额外的GET参数 *//*var params = utils.serializeParam(editor.queryCommandValue('serverparam')) || '',url = utils.formatUrl(actionUrl + (actionUrl.indexOf('?') == -1 ? '?':'&') + 'encode=utf-8&' + params);uploader.option('server', url);*/editor.getOpt("videoUploadService")(_this, editor).setUploaderOptions(uploader);setState('uploading', files);break;case 'stopUpload':setState('paused', files);break;}});uploader.on('uploadBeforeSend', function (file, data, header) {//这里可以通过data对象添加POST参数
//                header['X_Requested_With'] = 'XMLHttpRequest';editor.getOpt("videoUploadService")(_this, editor).setFormData(file, data, header);});uploader.on('uploadProgress', function (file, percentage) {var $li = $('#' + file.id),$percent = $li.find('.progress span');$percent.css('width', percentage * 100 + '%');percentages[ file.id ][ 1 ] = percentage;updateTotalProgress();});uploader.on('uploadSuccess', function (file, ret) {var $file = $('#' + file.id);try {/* var responseText = (ret._raw || ret),json = utils.str2json(responseText);*/
//                    if (json.state == 'SUCCESS') {
/*                      uploadVideoList.push({'url': json.url,'type': json.type,'original':json.original});
*/                      if (editor.getOpt("videoUploadService")(_this, editor).getResponseSuccess(ret)) {_this.fileList.push(ret);$file.append('<span class="success"></span>');} else {$file.find('.error').text(ret.message).show();}} catch (e) {$file.find('.error').text(lang.errorServerUpload).show();}});uploader.on('uploadError', function (file, code) {});uploader.on('error', function (code, file) {if (code == 'Q_TYPE_DENIED' || code == 'F_EXCEED_SIZE') {addFile(file);}});uploader.on('uploadComplete', function (file, ret) {});$upload.on('click', function () {if ($(this).hasClass('disabled')) {return false;}if (state === 'ready') {uploader.upload();} else if (state === 'paused') {uploader.upload();} else if (state === 'uploading') {uploader.stop();}});$upload.addClass('state-' + state);updateTotalProgress();},getQueueCount: function () {var file, i, status, readyFile = 0, files = this.uploader.getFiles();for (i = 0; file = files[i++]; ) {status = file.getStatus();if (status == 'queued' || status == 'uploading' || status == 'progress') readyFile++;}return readyFile;},getInsertList: function () {var i, data, list = [],align = $("#upload_alignment .focus").attr("name"),prefix = editor.getOpt('imageUrlPrefix'),videoSrcField = editor.getOpt("imageUploadService")(this, editor).videoSrcField || 'url',videoSrc = '',videoSrcFieldKeys = videoSrcField.split('.');for (i = 0; i < this.fileList.length; i++) {data = this.fileList[i];if(videoSrcFieldKeys.length > 1) {function setVideoSrc(obj, keys, index) {obj = obj[keys[index]];if (index < keys.length - 1) {setVideoSrc(obj, keys, index += 1)} else {videoSrc = obj;}}setVideoSrc(data, videoSrcFieldKeys, 0);} else {videoSrc = data[videoSrcField];}list.push({src: prefix + videoSrc,_src: prefix + videoSrc,alt: data.original,floatStyle: align});}return list;},refresh: function(){this.uploader.refresh();}};})();

搜索zh-cn.js，复制一套insertvideo

'insertaudio' : {/* 'static' : {'lang_tab_remote' : "插入音频",'lang_tab_upload' : "上传音频",},'uploadSelectFile' : '点击选择音频文件','uploadAddFile' : '继续添加','uploadStart' : '开始上传','uploadPause' : '暂停上传','uploadContinue' : '继续上传','uploadCancel' : '取消上传','uploadRetry' : '重试上传','uploadDelete' : '删除','uploadTurnLeft' : '向左旋转','uploadTurnRight' : '向右旋转','uploadPreview' : '预览中','uploadNoPreview' : '不能预览','updateStatusReady' : '选中_个音频文件，共_KB。','updateStatusConfirm' : '已成功上传_个音频文件，_个音频文件上传失败','updateStatusFinish' : '共_个（_KB），_个上传成功','updateStatusError' : '，_个音频文件上传失败。','errorNotSupport' : 'WebUploader 不支持您的浏览器！如果你使用的是IE浏览器，请尝试升级 flash 播放器。','errorLoadConfig' : '后端配置项没有正常加载，上传插件不能正常使用！','errorExceedSize' : '文件大小超出','errorFileType' : '文件格式不允许','errorInterrupt' : '文件传输中断','errorUploadRetry' : '上传失败，请重试','errorHttp' : 'http请求错误','errorServerUpload' : '服务器返回出错','remoteLockError' : "宽高不正确,不能所定比例",'numError' : "请输入正确的长度或者宽度值！例如：123，400",'audioUrlError' : "不允许的音频格式或者图片域！",'audioLoadError' : "音频加载失败！请检查链接地址或网络状态！",'searchRemind' : "请输入搜索关键词",'searchLoading' : "音频加载中，请稍后……",'searchRetry' : " :( ，抱歉，没有找到音频！请重试一次！"*/'static':{'lang_tab_insertV':"插入音频",'lang_tab_uploadV':"上传音频",'lang_video_url':"音频网址",'lang_video_size':"视频尺寸",'lang_videoW':"宽度",'lang_videoH':"高度",'lang_alignment':"对齐方式",'videoSearchTxt':{'value':"请输入搜索关键字！"},'videoType':{'options':["全部", "热门", "娱乐", "搞笑", "体育", "科技", "综艺"]},'videoSearchBtn':{'value':"百度一下"},'videoSearchReset':{'value':"清空结果"},'lang_input_fileStatus':' 当前未上传文件','startUpload':{'style':"background:url(upload.png) no-repeat;"},'lang_upload_size':"视频尺寸",'lang_upload_width':"宽度",'lang_upload_height':"高度",'lang_upload_alignment':"对齐方式",'lang_format_advice':"建议使用mp4格式."},'numError':"请输入正确的数值，如123,400",'floatLeft':"左浮动",'floatRight':"右浮动",'default':"默认",'block':"独占一行",'urlError':"输入的视频地址有误，请检查后再试！",'loading':" &nbsp;视频加载中，请等待……",'clickToSelect':"点击选中",'goToSource':'访问源视频','noVideo':" &nbsp; &nbsp;抱歉，找不到对应的视频，请重试！",'browseFiles':'浏览文件','uploadSuccess':'上传成功!','delSuccessFile':'从成功队列中移除','delFailSaveFile':'移除保存失败文件','statusPrompt':' 个文件已上传！ ','flashVersionError':'当前Flash版本过低，请更新FlashPlayer后重试！','flashLoadingError':'Flash加载失败!请检查路径或网络状态','fileUploadReady':'等待上传……','delUploadQueue':'从上传队列中移除','limitPrompt1':'单次不能选择超过','limitPrompt2':'个文件！请重新选择！','delFailFile':'移除失败文件','fileSizeLimit':'文件大小超出限制！','emptyFile':'空文件无法上传！','fileTypeError':'文件类型不允许！','unknownError':'未知错误！','fileUploading':'上传中，请等待……','cancelUpload':'取消上传','netError':'网络错误','failUpload':'上传失败!','serverIOError':'服务器IO错误！','noAuthority':'无权限！','fileNumLimit':'上传个数限制','failCheck':'验证失败，本次上传被跳过！','fileCanceling':'取消中，请等待……','stopUploading':'上传已停止……','uploadSelectFile':'点击选择文件','uploadAddFile':'继续添加','uploadStart':'开始上传','uploadPause':'暂停上传','uploadContinue':'继续上传','uploadRetry':'重试上传','uploadDelete':'删除','uploadTurnLeft':'向左旋转','uploadTurnRight':'向右旋转','uploadPreview':'预览中','updateStatusReady': '选中_个文件，共_KB。','updateStatusConfirm': '成功上传_个，_个失败','updateStatusFinish': '共_个(_KB)，_个成功上传','updateStatusError': '，_张上传失败。','errorNotSupport': 'WebUploader 不支持您的浏览器！如果你使用的是IE浏览器，请尝试升级 flash 播放器。','errorLoadConfig': '后端配置项没有正常加载，上传插件不能正常使用！','errorExceedSize':'文件大小超出','errorFileType':'文件格式不允许','errorInterrupt':'文件传输中断','errorUploadRetry':'上传失败，请重试','errorHttp':'http请求错误','errorServerUpload':'服务器返回出错'},

neditor本地上传音频二

neditor本地上传音频一相关推荐

es+ftp服务器传文件怎么那么慢,es本地上传文件ftp服务器
es本地上传文件ftp服务器内容精选换一换上传的文件和上传的文件夹中包含的文件支持的格式请参见支持的文件格式.文件上传:从本地上传:在Projects Explorer视图中选中一个文件夹,依次 ...
从本地上传到hdfs上出现异常
从本地上传到hdfs上出现异常参考文章: (1)从本地上传到hdfs上出现异常 (2)https://www.cnblogs.com/yclcl/p/5017945.html 备忘一下.
phpcms发布新闻到数据库_Phpcms V9网站从本地上传到服务器需要修改的地方小结
Phpcms V9网站从本地上传到服务器需要修改的地方小结发布时间:2013-06-22 13:37:28 作者:佚名我要评论网站在本地做好后要迁移到服务器上:网站在发展的过程中,很可能 ...
登入Github、Git本地上传及Visual Studio Code上传教程
GitHub 一.显示图片问题 1.1 连接失败 1.2 github图片不正常显示二.GitHub本地上传 2.1 直接使用git命令 2.2 VS Code上传一.显示图片问题 1.1 连接失 ...
Github 之本地上传代码到 Github ，并且添加 .gitignore 文件屏蔽一些文件上传（内附详细步骤）
Github 之本地上传代码到 github ,并且添加 .gitignore 文件屏蔽一些文件上传(内附详细步骤) 目录 Github 之本地上传代码到 github ,并且添加 .gitig ...
ubuntu从本地上传文件到云服务器、从云服务器下载文件到本地的命令(亲测有效)
1.ubuntu从本地上传文件到云服务器: sudo scp 本地文件路经 username@目标ip:目标路径在本地打开终端,输入命令,如: scp ./localfile.txt usernam ...
js文件本地上传服务器地址,js 本地文件同步服务器地址
js 本地文件同步服务器地址内容精选换一换用户可以将本地NAS存储中的数据,通过云专线迁移至云上SFS Turbo文件系统中,进行云上业务拓展.此方案通过在云上创建一台Linux操作系统的云服务 ...
Git和Github本地上传下载及拉取他人代码
Git和Github本地上传下载及拉取他人代码闻道有先后,术业有专攻(自己瞎搞一两个小时,没有后端老王15分钟来的透彻) 一:通过Git把Github上的代码下载到本地 !首先是什么!!下载Git, ...
阿里云OSS | 对象存储服务快速入门 | 参考官方文档实现使用JavaSDK上传文件 | 本地上传与web上传案例
参考文档 : 点击查看文章目录运行环境一.OSS相关概念 1.1 Storage Class 存储类型 1.2 Bucket 存储空间 1.3 Object 对象 1.4 Region 地域 1 ...

neditor本地上传音频一

neditor本地上传音频一相关推荐

最新文章

热门文章