soho-uploader

JavaScript Uploader

Usage no npm install needed!

<script type="module">
  import sohoUploader from 'https://cdn.skypack.dev/soho-uploader';
</script>

README

JavaScript Uploader

Installation

npm i soho-uploader

Example


<button class="selectButton"></button>

<script>

const defaults = {
    name: 'file',// 上傳後PHP得到的$_FILES[名稱]
    selectBtn: null, // 選擇button
    uploadBtn: null, // 上傳button
    auto: true, // 是否選擇後自動上傳
    server: 'upload.php',
    accept: {
        title: 'Images',
        extensions: 'gif,jpg,jpeg,bmp,png,svg',
        mimeTypes: 'image/*'
    },
    data: {}, // 附加的參數,
    numThreads: 3, // 最多同時上傳的線程數
    uploadProgress: null,//上傳進度,回調函數
    uploadComplete: null,//上傳完成,回調函數
    uploadFailed: null,//上傳失敗,回調函數
    uploadError: null,//上傳出錯,回調函數
    uploadCanceled: null,//取消上傳,回調函數
    uploadSuccess: null,//上傳成功,回調函數
    uploadQueued: null,//加入上傳隊列時觸發@addFile
    uploadBeforeSend: null,//發送上傳請求回調函數
    debug: 0,//是否開啟調試
    timeout: 300000,//上傳超時時間1000表示1秒
    dataType: 'json',
    thumbWidth: 60,
    thumbHeight: 60,
    chunked: 0, // 分塊上傳,
    chunkSize: 1024 * 1024 * 5,//单位byte,  1024*1024*2 = 2MB ,
    chunkAction: 'chunkUpload.php',
    chunkCancelUrl: '',//取消分片上传网址,用于清理临时文件
    multiple: 1, // 多選上傳,
    allComplete: null,//全部完成,回調函數
    allSuccess: null//合部成功,回調函數
};

let options={
  selectBtn: '.selectButton',  
}

const uploader = new SohoUploer(options); 
</script>