您的位置：首页 > 其它

WebUploader上传图片(不压缩)

2018-01-11 15:04 351 查看

<!DOCTYPE html>

<html>

<head>

<title>webuploader图片上传</title>

<meta charset="utf-8"/>

<link href="lib/webuploader/0.1.5/webuploader.css" rel="stylesheet" type="text/css" />

</head>

<body>

<img id="face_image" style="width:50px;height:50px;border-radius: 25px;border: 1px solid #fff;"/>

<div id="uploader-demo">

<div id="fileList" class="uploader-list"></div>

<div id="filePicker">选择图片（webuploader）</div>

</div>

<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript" src="lib/webuploader/0.1.5/webuploader.min.js"></script>

</body>

<script>

/**

* webuploader图片上传

*/

$(function() {

console.log('webuploader图片上传。。。');

var webuploaderutil = {};

// Web Uploader实例

var uploader;

var $list = $('#fileList'),

// 优化retina, 在retina下这个值是2

ratio = window.devicePixelRatio || 1,

thumbnailWidth = 100 * ratio, thumbnailHeight = 100 * ratio,

// 初始化Web Uploader

uploader = WebUploader.create({

// 自动上传。

auto : true,

compress:false, //是否压缩图片,默认true

// 文件接收服务端。

server : 'http://192.168.2.222:7070/file/upload',

// 选择文件的按钮。可选。

// 内部根据当前运行是创建，可能是input元素，也可能是flash.

pick : '#filePicker',

chunked:true,

chunkRetry: 10, // 如果某个分片由于网络问题出错，允许自动重传多少次？

thread: 100,// 最大上传并发数

// 只允许选择文件，可选。

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">'

+ '<img>' + '<div class="info">' + file.name + '</div>'

+ '</div>'), $img = $li.find('img');

$list.append($li);

// 创建缩略图

uploader.makeThumb(file, function(error, src) {

if (error) {

$("#face_image").replaceWith('<span>不能预览</span>');

$img.attr( 'src', src );

return;

}

$img.attr( 'src', src );

$("#face_image").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 + '%' );

});

// 文件上传成功，给item添加成功class, 用样式标记上传成功。

uploader.on('uploadSuccess', function(file, response) {

$('#' + file.id).addClass('upload-state-done');

//重新初始化

// webuploaderutil.uploadPicByResp(uploadDiv, imgEle, success, error);

console.log('response:', response);

});

// 文件上传失败，现实上传出错。

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();

});

});

</script>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航