前端常用插件使用文档以及demo之上传文件 web uploader 常见

最新推荐文章于 2024-08-22 15:15:49 发布

陆康永

最新推荐文章于 2024-08-22 15:15:49 发布

阅读量7.6k

点赞数

分类专栏：常见插件使用

本文链接：https://blog.csdn.net/xiaomogg/article/details/47445415

版权

常见插件使用专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文档：http://fex.baidu.com/webuploader/

html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>WebUploader演示</title>
<link rel="stylesheet" type="text/css" href="../css/webuploader.css" />
<link rel="stylesheet" type="text/css" href="./style.css" />
</head>
<body>

upload.js

//实例化一个对象

var uploader = WebUploader.create({
//开始配置

// swf文件路径,IE6 7，会自动使用flash来上传
swf: '../dist/Uploader.swf',

// 文件接收服务端。
server: '../server/fileupload.php',

// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick: {
id:'#picker',
multiple:false //禁止多选，
},

// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
resize: false
});

var $list=$("#list");
var abc;

//绑定事件,
uploader.on( 'fileQueued', function( file) {
//生成缩略图
uploader.makeThumb( file, function(error, src) {
abc='<div id="' + file.id + '" class="item">' +
'<img src="'+ src+'"/>'+
'<p class="state">等待上传...</p>' +
'<div class="x">x</div>'+
'</div>';

$list.append(abc);//已加入队列的图片在html视图里面展示

$(".item").on("click",".x",function(){ //点击html图片的外层，通过事件的对象来获取点击X，来删除队列指定的图片

var attr=$(this).parent(".item").attr("id"); //获取要删除的图的ID，
uploader.removeFile(file,attr);//删除指ID，这样我们就能再次上传这个图片了，这里也可以使用 uploader.getFile(attr)替换，因为他返回的也是file对象
$(this).parent(".item").remove();
console.log(uploader.getStats()); //能看到队列状态，队列里面的queueNum数量-1
});
});

$("#ctlBtn").on("click",function(){ //点击按钮上传
uploader.upload(file);
});

});