webuploader（WebUploader：让文件上传变得更加简单）

最佳答案WebUploader：让文件上传变得更加简单 WebUploader 是一款基于 HTML5 技术开发的文件上传组件，无需借助任何外部插件即可实现文件上传功能。它适用于各种界面风格，实现了文件分...

WebUploader：让文件上传变得更加简单 WebUploader 是一款基于 HTML5 技术开发的文件上传组件，无需借助任何外部插件即可实现文件上传功能。它适用于各种界面风格，实现了文件分片上传、断点续传、压缩图片上传等功能，使上传操作更加稳定、简单和高效。本文将介绍 WebUploader 的基本使用和相关的实例，帮助你快速入门文件上传。

一、WebUploader 的基本使用

1、环境准备 首先要将 WebUploader 的源代码下载到本地，并创建一个新的 HTML 页面，把 WebUploader 的所有文件导入页面中。在页面中导入文件的方式有多种，比如使用 script 标签导入，使用 require.js 或者 webpack 进行打包等方式。 2、HTML 结构设计 在 HTML 源代码中创建一个div 元素，用于放置 WebUploader 的容器，此处我们为 div 元素赋予了 id 为 'uploader'： ```html ``` 3、JS 代码引入和实例化 实例化 WebUploader 组件常常需要加入一些自定义的参数。比如可以指定服务器 URL，设置文件大小限制、文件数量等。以下是一个简单的 WebUploader 实例化代码： ```javascript var uploader = WebUploader.create({ // 选完文件后，是否自动上传。 auto: true, // 文件接收服务端。 server: '/upload', // 限制上传的文件大小，单位为 KB。 fileSizeLimit: 1024 * 1024 * 10, // 指定可以上传的文件类型，格式为数组。 accept: { extensions: 'gif,jpg,jpeg,bmp,png' } }); ```

二、WebUploader 的实例

1、异步上传示例 这个示例主要是展示如何使用 WebUploader 进行文件异步上传，异步上传的概念是指在文件传输过程中页面不会进行任何的刷新或是跳转，而是在后台持续进行上传操作，通过前台 JS 进行反馈和提示。以下是上传进度、上传成功和上传失败的反馈内容： ```javascript // 添加“添加文件”的按钮。 uploader.addButton({ id: '#filePickerBtn', label: '选择文件' }); // 当有文件添加进来的时候。 uploader.on('fileQueued', function (file) { var $list = $('#fileList'); // 现实文件大小和正在上传。 $list.append(''); }); // 文件上传过程中创建进度条实时显示。 uploader.on('uploadProgress', function (file, percentage) { var $li = $('#'+file.id), $percent = $li.find('.progress span'); // 如果没有进度条就新建，否则上传。 if (!$percent.length) { $percent = $('

') .appendTo($li) .find('span'); } $percent.css('width', percentage * 100 + '%'); $percent.parent().siblings('.state').text('上传中'); }); // 文件上传成功软文处理，后台返回的数据中必须包含标志(success=true)。 uploader.on('uploadSuccess', function (file, response) { $('#'+file.id).find('.state').text('已上传'); }); // 文件上传出错。 uploader.on('uploadError', function (file) { $('#'+file.id).find('.state').text('上传出错'); }); // 文件上传完成，不管成功或者失败。 uploader.on('uploadComplete', function (file) { $('#'+file.id).find('.progress').fadeOut(); }); ``` 2、图片压缩上传示例 这个示例展示了如何在上传图片时对图片进行压缩，以避免上传大型图片时出现问题。通过使用 canvas 元素对图片进行压缩和转换，然后对转换后的结果进行上传操作。以下是一个压缩上传的示例代码： ```javascript uploader.on('beforeFileQueued', function (file) { // 图片转成base64。 var reader = new FileReader(); reader.onload = function (e) { var base64Img = e.target.result; // 使用canvas对图片进行压缩和转换。 var img = new Image(); img.src = base64Img; img.onload = function () { var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); var width = img.width; var height = img.height; var compressWidth = 750; // 压缩后的宽度。 canvas.width = compressWidth; canvas.height = height * compressWidth / width; ctx.clearRect(0, 0, canvas.width, canvas.height); // 清屏。 ctx.drawImage(img, 0, 0, canvas.width, canvas.height); // 画布上属性图片。 var compressBase64 = canvas.toDataURL('image/jpeg', 0.8); // 生成压缩后的base64数据。 // 根据压缩后的base64数据创建Blob对象用于上传。 var compressBlob = dataURLtoBlob(compressBase64); compressBlob.name = file.name; // 将压缩后的Blob对象的name设置为源文件的name。 // 将压缩后的文件添加到队列中。 uploader.addFile(compressBlob); } }; // 将上传的文件转化为base64格式。 reader.readAsDataURL(file.source.source); return false; // 不一上来就添加到队列当中。注意：调用该方法时必须保证队列空。 }); // 将base64数据转化为Blob对象，该对象只能由前台上传而不能直接由后台进行解析。 function dataURLtoBlob(dataurl) { var arr = dataurl.split(','); var mime = arr[0].match(/:(.*?);/)[1]; var bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } return new Blob([u8arr], { type: mime }); } ```

三、总结

WebUploader 是一款非常实用的文件上传组件，它具有文件分片上传、断点续传和上传速度控制等强大的功能。通过本文的介绍，你可以了解到 WebUploader 的基本用法和一些实用的示例，帮助你更加深入地理解和使用 WebUploader，轻松地实现文件上传功能。