>[success] # 書中上傳案例 ~~~ 1.內容太多 不總接了直接用書上的內容了 ~~~ [直接看這個了](https://www.cnblogs.com/xiaohuochai/p/8046560.html) ~~~ window.external.upload = function( state ){ console.log( state ); // 可能為 sign、uploading、done、error }; var plugin = (function(){ var plugin = document.createElement( 'embed' ); plugin.style.display = 'none'; plugin.type = 'application/txftn-webkit'; plugin.sign = function(){ console.log( '開始文件掃描' ); } plugin.pause = function(){ console.log( '暫停文件上傳' ); }; plugin.uploading = function(){ console.log( '開始文件上傳' ); }; plugin.del = function(){ console.log( '刪除文件上傳' ); } plugin.done = function(){ console.log( '文件上傳完成' ); } document.body.appendChild( plugin ); return plugin; })(); var Upload = function( fileName ){ this.plugin = plugin; this.fileName = fileName; this.button1 = null; this.button2 = null; this.signState = new SignState( this ); // 設置初始狀態為 waiting this.uploadingState = new UploadingState( this ); // 上傳 this.pauseState = new PauseState( this ); // 暫停 this.doneState = new DoneState( this ); // 上傳完成 this.errorState = new ErrorState( this ); // 上傳失敗 this.currState = this.signState; // 設置當前狀態 }; Upload.prototype.init = function(){ var that = this; this.dom = document.createElement( 'div' ); this.dom.innerHTML = '<span>文件名稱:'+ this.fileName +'</span>\ <button data-action="button1">掃描中</button>\ <button data-action="button2">刪除</button>'; document.body.appendChild( this.dom ); this.button1 = this.dom.querySelector( '[data-action="button1"]' ); this.button2 = this.dom.querySelector( '[data-action="button2"]' ); this.bindEvent(); }; Upload.prototype.bindEvent = function(){ var self = this; this.button1.onclick = function(){ self.currState.clickHandler1(); } this.button2.onclick = function(){ self.currState.clickHandler2(); } }; Upload.prototype.sign = function(){ this.plugin.sign(); this.currState = this.signState; }; Upload.prototype.uploading = function(){ this.button1.innerHTML = '正在上傳，點擊暫停'; this.plugin.uploading(); this.currState = this.uploadingState; }; Upload.prototype.pause = function(){ this.button1.innerHTML = '已暫停，點擊繼續上傳'; this.plugin.pause(); this.currState = this.pauseState; }; Upload.prototype.done = function(){ this.button1.innerHTML = '上傳完成'; this.plugin.done(); this.currState = this.doneState; }; Upload.prototype.error = function(){ this.button1.innerHTML = '上傳失敗'; this.currState = this.errorState; }; Upload.prototype.del = function(){ this.plugin.del(); this.dom.parentNode.removeChild( this.dom ); }; var StateFactory = (function(){ var State = function(){}; State.prototype.clickHandler1 = function(){ throw new Error( '子類必須重寫父類的 clickHandler1 方法' ); } State.prototype.clickHandler2 = function(){ throw new Error( '子類必須重寫父類的 clickHandler2 方法' ); } return function( param ){ var F = function( uploadObj ){ this.uploadObj = uploadObj; }; F.prototype = new State(); for ( var i in param ){ F.prototype[ i ] = param[ i ]; } return F; } })(); var SignState = StateFactory({ clickHandler1: function(){ console.log( '掃描中，點擊無效...' ); }, clickHandler2: function(){ console.log( '文件正在上傳中，不能刪除' ); } }); var UploadingState = StateFactory({ clickHandler1: function(){ this.uploadObj.pause(); }, clickHandler2: function(){ console.log( '文件正在上傳中，不能刪除' ); } }); var PauseState = StateFactory({ clickHandler1: function(){ this.uploadObj.uploading(); }, clickHandler2: function(){ this.uploadObj.del(); } }); var DoneState = StateFactory({ clickHandler1: function(){ console.log( '文件已完成上傳, 點擊無效' ); }, clickHandler2: function(){ this.uploadObj.del(); } }); var ErrorState = StateFactory({ clickHandler1: function(){ console.log( '文件上傳失敗, 點擊無效' ); }, clickHandler2: function(){ this.uploadObj.del(); } }); ~~~