webuploader.js 图片上传

最新推荐文章于 2024-07-03 11:37:41 发布

小恒同学

最新推荐文章于 2024-07-03 11:37:41 发布

阅读量1.1k

点赞数

分类专栏：前段图片上传

本文链接：https://blog.csdn.net/weixin_41686779/article/details/85235980

版权

前段同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

图片上传

1 篇文章 0 订阅

订阅专栏

今天好好研究了一下图片上传的api，参考百度的webuploder.js-----------------------

api http://fex.baidu.com/webuploader/doc/index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/webuploader.css" />
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/webuploader.js"></script>
	</head>
	<body>
		<div id="uploader" class="wu-example">
    <!--用来存放文件信息-->
	    <div id="thelist" class="uploader-list">
	    	<div id="picker">
	        	 <img src="img/all.png" style="display: block; width: 150px;height: 150px;" alt=""/>
	        </div>
	    </div>
	    <script>
	    var $list = $('#thelist');
	    var uploader = WebUploader.create({
		    swf:'/js/Uploader.swf',
		    // 文件接收服务端。
		    server: 'http://webuploader.duapp.com/server/fileupload.php',
		    // 选择文件的按钮。可选。
		    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
		    pick: '#picker',
		    // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
		    resize: false,
		    chunked: true
		});
		uploader.on( 'fileQueued', function( file ) {
	    var $li = $(
	            '<div id="' + file.id + '" class="file-item thumbnail" style="position:relative;float: left;width: 300px;">' +
	                '<img>' + '<span style="position:absolute;top:0px;right:0px;width:15px;height:15px;border-radius:50%;background:red;"></span>'+
	            '</div>'
	            ),
	    $img = $li.find('img');
	
	
	    // $list为容器jQuery实例
	    $list.append( $li );
	
	    // 创建缩略图
	    // 如果为非图片文件，可以不用调用此方法。
	    // thumbnailWidth x thumbnailHeight 为 100 x 100
	    uploader.makeThumb( file, function( error, src ) {
	        if ( error ) {
	            $img.replaceWith('<span>不能预览</span>');
	            return;
	        }
	        $img.attr( 'src', src );
	    }, 200, 200);
	    $li.on('click', function(file) {
	     	console.log($(this).attr('id'))
		    uploader.removeFile($(this).attr('id'));
//		    uploader.reset()
		    console.log(uploader.getFiles('inited'))
		})
	    });
	   
	    console.log(uploader.getFiles())
		    </script>
	</body>
</html>

贴上代码：

一首先是几个状态需要理解

inited 初始状态
queued 已经进入队列, 等待上传
progress 上传中
complete 上传完成。
error 上传出错，可重试
interrupt 上传中断，可续传。
invalid 文件不合格，不能重试上传。会自动从队列中移除。
cancelled 文件被移除。

我们只需要写好dom 然后在各种监听事件中我们需更改的样式和回调函数、、、

uploader.removeFile($(this).attr('id'));
console.log(uploader.getFiles('inited'))

这里我重点是想说这两个回调

删除文件后在打印文件的队列需打印最开始的状态，如果我们直接getFiles（）看到的结构还是原来的数组

duplicate {Boolean} [可选] [默认值：undefined]
去重，根据文件名字、文件大小和最后修改时间来生成hash Key.

将dupliacate设置为true, 允许文件多次上传

小恒同学

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
webuploader.js 图片上传

今天好好研究了一下图片上传的api，参考百度的webuploder.js-----------------------api http://fex.baidu.com/webuploader/doc/index.html&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt...
复制链接

扫一扫

专栏目录