webuploader.min.js 簡單例子

時間 2019-11-09

標籤 webuploader.min.js webuploader min 簡單例子欄目 JavaScript 简体版

原文原文鏈接

一個百度開發的開源框架javascript

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>php

uploader.on('fileQueued',function(file) {
var $list = $("#fileList");
var $li = $('<div id="' + file.id + '" class="file-item thumbnail">'
+ '<img>'
+ '<div class="info">'
+ file.name
+ '</div>'
+ '</div>');

var $img = $li.find('img');html

// $list爲容器jQuery實例
$list.append($li);java

// 建立縮略圖
uploader.makeThumb(file, function(error, src) {
if (error) {
$img.replaceWith('<span>不能預覽</span>');
return;
}jquery

$img.attr('src', src);//給img標籤賦值src路徑
}, 100, 100); //100x100爲縮略圖尺寸
});web

//文件上傳過程當中建立進度條實時顯示。
uploader.on('uploadProgress', function(file, percentage) {
var $li = $('#' + file.id), $percent = $li.find('.progress span');app

// 避免重複建立
if (!$percent.length) {
$percent = $('<p class="progress"><span></span></p>').appendTo(
$li).find('span');
}框架

$percent.css('width', percentage * 100 + '%');
});spa

// 文件上傳成功，給item添加成功class, 用樣式標記上傳成功。
uploader.on('uploadSuccess', function(file, res) {
console.log(res.filePath);//這裏能夠獲得上傳後的文件路徑
$('#' + file.id).addClass('upload-state-done');
});

// 文件上傳失敗，顯示上傳出錯。
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();
});

/*
uploader.option( 'compress', {
width: 1600,
height: 1600
});*/
});
</script>
</head>

<body>

</body></html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。