webuploader的使用

最新推荐文章于 2024-08-08 08:30:51 发布

给我一瓶冰阔洛

最新推荐文章于 2024-08-08 08:30:51 发布

阅读量423

点赞数 1

分类专栏：前端文章标签： webuploader

本文链接：https://blog.csdn.net/qq_43035350/article/details/97695017

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

webuploader是一个功能很强大的插件，但是在使用的时候遇到很多坑；记录一下，方便下次使用，也希望能帮助一些新手；

1.下载wenuploader 插件

http://fex.baidu.com/webuploader/

2.不多BB 看代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="webupload/webuploader.css">
    <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript" src="webupload/webuploader.min.js"></script>
</head>
<body>

<div id="uploadimg">
    <div id="fileList" class="uploader-list"></div>
    <div id="imgPicker">选择图片</div>
</div>


<input type="submit" id="startsub" value="上传">
<script>
    var uploader = WebUploader.create({
        auto: false, // 选完文件后，是否自动上传  如果是false 则需要submit 提交
        swf: 'webupload/Uploader.swf', // swf文件路径
        server: 'upload.php', // 文件接收服务端
     //   pick: '#imgPicker', // 选择文件的按钮。可选
        pick: {id:"#imgPicker",innerHTML:"选择图片",multiple:true},// 选择文件的按钮。可选
        fileVal:'img',//  后台用 $_FILES['img']。
       fileSingleSizeLimit:500000,//单个文件上传大小（字节）
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/*'
        }
    });

    var $list = $("#fileList");//显示上传图片的容器实例；
    var thumbnailWidth = 200;//图片宽高
    var thumbnailHeight = 200;
    uploader.on( 'fileQueued', function( file ) {
        var $li = $(
                        '<div id="' + file.id + '" class="file-item thumbnail">' +
                        '<img>' +
                        '<div class="info">' + file.name + '</div>' +
						'<span id="del" >删除图片</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 );
        }, thumbnailWidth, thumbnailHeight );
    });

//单击上传
$("#startsub").click(function(){
    uploader.upload();
});

//删除队列中图片

$list.on('click','#del',function(){
	var id = $(this).parent().attr('id'); 
	$(this).parent().remove();
	var que_id = uploader.getFile(id);
	uploader.removeFile(que_id);

});





   //文件上传过程中创建进度条实时显示
    uploader.on('uploadProgress',function(file,precentage){
        var $li = $('#' + file.id);
		$percent = $li.find('progress');
		 if (!$percent.length) { // 避免重复创建
			 $li.append('<progress value="'+precentage+'" max="1"></progress>');
		 }
     
    });
	

    //文件上传成功给class 添加成功样式。用样式标记成功
    uploader.on('uploadSuccess',function(file,res){
	//上传成功之后隐藏删除按钮
	 var $li = $('#' + file.id);
	    $li.find('span').remove();
        console.log('uploadSuccess2');
    });

    //文件上传失败，显示上传错误
    uploader.on('uploadError',function(file){
        console.log('uploadErrer3');
    });

    //上传完成或失败，先删除进度条
    uploader.on('uploadComplete',function(file){
        console.log('uploadComplete4');
    });


</script>


</body>
</html>