WebUploader,由Baidu FEX 團隊開發,以H5為主,FLASH為輔,兼容 IE6+,iOS 6+, android 4+,采用大文件分片並發上傳,極大的提高了文件上傳效率,看了官方文檔就知道,能滿足你所需要的所有功能。
官方地址:http://fex.baidu.com/webuploader/
由於項目需求,需要壓縮圖片上傳,於是我找到了這款插件,個人感覺很不錯。
// 初始化Web Uploader uploader = WebUploader.create({ // 自動上傳。 auto: true, // swf文件路徑 swf: 'webuploader/Uploader.swf', // 文件接收服務端。 server: 'discern/ceshi/cc', // [默認值:'file'] 設置文件上傳域的name。 fileVal:'file', // 選擇文件的按鈕。可選。 // 內部根據當前運行是創建,可能是input元素,也可能是flash. pick: '#filePicker', // 圖片壓縮配置參數列表 compress:{ width: 100, height: 100, // 圖片質量,只有type為`image/jpeg`的時候才有效。 quality: 100, // 是否允許放大,如果想要生成小圖的時候不失真,此選項應該設置為false. allowMagnify: false, // 是否允許裁剪。 crop: false, // 是否保留頭部meta信息。 preserveHeaders: true, // 如果發現壓縮后文件大小比原來還大,則使用原來圖片 // 此屬性可能會影響圖片自動糾正功能 noCompressIfLarger: false, // 單位字節,如果圖片大小小於此值,不會采用壓縮。 compressSize: 0 }, // 只允許選擇文件,可選。 accept: { title: 'Images', extensions: 'gif,jpg,jpeg,bmp,png', mimeTypes: 'image/*' } }); // 當有文件添加進來的時候 (預覽) uploader.on( 'fileQueued', function( file ) { var $li = $( '<div id="' + file.id + '" class="file-item thumbnail">' + '<div class="correct"></div><div class="error-icon"></div>'+ '<img>' + '<p class="progress"><span style="color: #000"></span></p>'+ '<div class="info">' + file.name + '</div>' + '</div>' ), $img = $li.find('img'); $list.append( $li ); // 創建縮略圖 uploader.makeThumb( file, function( error, src ) { if ( error ) { $img.replaceWith('<span>不能預覽</span>'); return; } $img.attr( 'src', src ); }, thumbnailWidth, thumbnailHeight ); }); // 文件上傳過程中創建進度條實時顯示。 uploader.on( 'uploadProgress', function( file, percentage ) { var $li = $( '#'+file.id ), $percent = $li.find('.progress span'); // 避免重復創建 if ( !$percent.length ) { $percent = $('<p class="progress"><span></span></p>') .appendTo( $li ) .find('span'); } $percent.css( 'width', percentage * 100 + '%' ); }); // 文件上傳成功,ajax返回data參數 uploader.on( 'uploadSuccess', function( file,data ) { console.log(file); console.log(data); }); // 文件上傳失敗,現實上傳出錯。 uploader.on( 'uploadError', function( file ) { var $li = $( '#'+file.id ), $error = $li.find('div.error'); // 避免重復創建 if ( !$error.length ) { $error = $('<div class="error"></div>').appendTo( $li ); } $error.text('上傳失敗!!!'); }); // 完成上傳完了,成功或者失敗,先刪除進度條。 uploader.on( 'uploadComplete', function( file ) { $( '#'+file.id ).find('.progress').remove(); });
項目親測這個配置一張5MB左右的圖片,經過壓縮后只有200kb左右!