多文件上傳 file-uploader.js


插件暴露給用戶可以設置的參數

插件構成

聲明一個全局對象qq,在對象上封裝幾個方法,類似JQUERY的方法
qq.extend 合並對象屬性,類似$.extend()
qq.indexOf 獲取元素索引
qq.getUniqueId
qq.ie--qq.safari--qq.chrome--qq.firefox--qq.windows
qq.attach 事件綁定
qq.detach 解除事件綁定
qq.preventDefault 組織瀏覽器磨人行為
qq.insertBefore 插入元素
qq.remove
qq.contains
qq.toElement
qq.css
qq.hasClass
qq.addClass
qq.removeClass
qq.setText
qq.children
qq.getByClass
qq.obj2url 組合請求地址
 
qq.FileUploaderBasic    基本屬性和外接方法
 
qq.FileUploaderBasic.prototype---文件上傳插件的原型
    setParams
    getInProgress
    _createUploadButton--創建上傳按鈕,包括上傳按鈕屬性,事件
    _createUploadHandler--上傳處理程序
    _preventLeaveInProgress
    _onSubmit
    _onProgress
    _onComplete
    _onCancel
    _onUpload
    _onInputChange
    _uploadFileList
    _uploadFile
    _validateFile--文件校驗,格式,大小等
    _formatFileName    限制名字長度
    _isAllowedExtension
    _formatSize    格式化輸出圖片大小
 
qq.FileUploader
    qq.extend() 追加新的參數,包含上傳按鈕,圖片列表模板等基本信息
    
    
 qq.FileUploader
    addExtraDropzon
    removeExtraDropzone
    _leaving_document_out
    _find--從this._options.classes中獲取元素,包含上傳按鈕和圖片列表
    _setupExtraDropzone
    _setupDropzone
    _setupDragDrop
    _onSubmit--先執行option參數中的onSubmit如果返回false,不再繼續執行,否則再執行FileUploaderBasic的_onSubmit函數
        
 
  提交上傳FileUploader.prototype._onSubmit,_addToList是添加列表項; 另外一提,qq.FileUploaderBasic.prototype._onSubmit.apply(this, arguments);首先執行插件暴露的onSubmit方法里的代碼塊,這里是你實例化插件時可以附加的(選填);
  

 
圖片上傳完成(complete)會接收一個JSON格式的響應,插件默認是使用{success:true/false}定義服務器端的響應,並且根據服務器端的響應,給上傳列表添加是否上傳成功的樣式;可以在這個位置自定義服務器的返回格式;插件在上傳完成以后默認是把加載效果spinner和取消上傳按鈕cancel移除DOM元素
  
    _addToList--控制上傳文件列表中的內容,一般是列表模板中定義的需要的文件相關信息,圖片名稱,大小
    _getItemByFileId--獲取當前列表項的DOM對象
    __bindCancelEvent--定義取消上傳按鈕的事件,取消事件的類名是在_classes中定義的cancel 如果是自定義上傳列表模板,需修改fileTemplate和classes,並且要一一對應,classes對象中的屬性必須出現;(比較麻煩)
 
qq.UploadDropZone--定義拖拽構造函數
qq.UploadDropZone.prototype--拖拽原型
 
qq.UploadButton--定義上傳按鈕
qq.UploadButton.prototype
    getInput
    reset
    _createInput--創建上傳按鈕,包含樣式,屬性和事件
   
qq.UploadHandlerAbstract--上傳插件抽象函數,輔助函數
qq.UploadHandlerAbstract.prototype
    log--日志
    add
    upload
 
qq.UploadHandlerXhr--異步上傳
qq.UploadHandlerXhr.prototype--異步上傳原型,包含異步上傳的所有方法
    add
    getName
    getSize
    getLoaded
    _upload--圖片上傳細節,創建XMLHttpRequest,監聽status,設置請求頭
  
    
    _onComplete--在_upload中服務器響應后調用
    _cancel--終止異步請求
    
 
現在這個插件項目已經遷移到fine-uploader項目上了,以后會對插件使用規范下一下文檔


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM