前端插件-webuploader

前端插件-webuploader

---

---

前言

前几天在用webuploader做一个上传证明材料的时候出现一个奇怪的问题，在此记录下解决过程。

---

一、webuploader介绍

webuploader插件的使用有个webuploader.css，webuploader.js，另外再加上一个文件Uploader.swf，具体可参考api：https://fex.baidu.com/webuploader/doc/index.html

二、webuploader使用

1.初始化-create

    var ext = 'PDF';
    var title = '上传PDF格式文件';
    var extensions = 'pdf';
    var mimeTypes = 'application/pdf';
var uploader = WebUploader.create({
        // 选完文件后，是否自动上传。
        auto: true,
        // swf文件路径
        swf: '/js/webupload/Uploader.swf',
        // 文件接收服务端。
        server: '/uploadFile',
        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        fileVal:'photo',
        pick: '#pick',
        // 只允许选择图片文件。
        accept: {
            title: title,
            extensions: extensions,
            mimeTypes: mimeTypes
        },
        formData:{"name":"photo","type":"pdf"},
        thumb :{
            width: 900,
            height: 600,
            // 图片质量，只有type为`image/jpeg`的时候才有效。
            quality: 70,
            // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
            allowMagnify: true,
            // 是否允许裁剪。
            crop: true,
            // 为空的话则保留原有图片格式。
            // 否则强制转换成指定的类型。
            // type: 'image/jpeg'
        },
        compress:false
    });

2.beforeFileQueued

uploader.on( 'beforeFileQueued', function( file ) {
        uploader.reset();
        if(file.ext.toUpperCase()!='PDF'){
            parent.layer.alert("上传的文件只能为pdf格式");
            return false;
        }
        if(file!=null){
            if(file.size<102400){
                parent.layer.alert("上传的文件不能小于100kb");
                return false;
            }
            if (ext === "PDF"){
                if(file.size>512000){
                    parent.layer.alert("上传的文件不能大于500kb");
                    return false;
                }
            }else {
                if(file.size>307200){
                    parent.layer.alert("上传的文件不能大于300kb");
                    return false;
                }
            }
        }else{
            parent.layer.alert("请选择要上传的"+ext<%=i%>+"格式文件");
            return false;
        }
    });

3.fileQueued

// 当有文件添加进来的时候
    uploader.on( 'fileQueued', function( file ) {
        var files = uploader.getFiles();
        //  if(files!=null&&files)
        var $img =$("#photoimg");
        var $a=$("#photoa");
        // 创建缩略图
        // 如果为非图片文件，可以不用调用此方法。
        // thumbnailWidth x thumbnailHeight 为 100 x 100
        document.getElementById("show").style.display ="block";
        uploader.makeThumb( file, function( error, src ) {
            if ( error ) {
                $img.attr( 'src', '' );
                $a.attr('href',src);
                $( '#photodiv').text("不能预览");
                return;
            }
            $img.attr( 'src', src );
            $a.attr('href',src);
        });
    });

4.uploadProgress

//显示进度条
uploader.on( 'uploadProgress', function( file, percentage ) {
        var $li = $( '#photodiv');
        $( '#photodiv').text('');
        $percent = $li.find('.progress span');
        // 避免重复创建
        if ( !$percent.length ) {
            $percent = $('<div " class="progress progress-striped active">' +
                '<div class="progress-bar" style="height:20px; background-color:red; role="progressbar" style="width: 0%">' +
                '</div>' +
                '</div>').appendTo($li).find('.progress-bar');
        }
        $percent.css( 'width', percentage * 100 + '%' );
    });

5.uploadBeforeSend

uploader.on('uploadBeforeSend', function (obj, data) {
        var photoType = document.getElementById('photoType').value;
        //传入表单参数
        data = $.extend(data, {
            "photoType": photoType
        });
    });

6.uploadSuccess

uploader.on( 'uploadSuccess', function( file ,data) {
        document.getElementById("show").style.display = 'none';
        if(data.message=="上传成功！"){
            var fileTypeName = "";
            var time =  new Date().getTime();
            $( '#photohref' ).html("<a href='/exportPdfZmcl.htm?name=photo&type=pdf' id='photoa' target='_blank' style='font-size:18px; font-weight:bold;'>已上传（点击下载）</a>");
         $( '#photodiv' ).html("<font style=' font-size:14px; font-weight:bold; color:#F00;'>上传成功,如需修改请重新上传</font>");
         }else{
           $( '#photoa' ).attr('href','/exportPdfZmcl.htm?name=photo&type=pdf');
            $( '#photoa' ).attr('onclick','');
            $( '#photodiv' ).html("<font style=' font-size:14px; font-weight:bold; color:#F00;'>"+data.message+"</font>");
        }
        $( '#photodiv' ).addClass('upload-state-done');
    });

7.uploadError

uploader.on( 'uploadError', function( file,data ) {
        parent.layer.alert(data.message);
        var $li = $( '#photodiv'),
            $error = $li.find('div.error');
        // 避免重复创建
        if ( !$error.length ) {
            $error = $('<div class="error"></div>').appendTo( $li );
        }
        $error.text('上传失败');
    });

8.uploadComplete

// 完成上传完了，成功或者失败，先删除进度条。
    uploader.on( 'uploadComplete', function( file ) {
        $( '#photodiv').find('.progress').remove();
    });

9.html代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>上传示例</title>
<script type="text/javascript" src="/js/webupload/webuploader.min.js" charset="iso-8859-1"></script>
<link href="/js/webupload/webuploader.css" rel="stylesheet" type="text/css">
<style type="text/css">
#photo div:nth-child(2) {
            width: 100% !important;
            height: 100% !important;
        }
</style>
</head>
<body>
    <div style="width:80%;margin: 0 auto;">
		<h3>证明文件：</h3>
		<a href="#" title="请上传<%=cltitle%>">
		   <div id="photo" >
				境外学历、非高等教育学历、其他学历等材料
			</div>
		</a>
    </div><br/>
	<div style="width:80%;margin:0px auto;">
	<a href="/exportPdfZmcl?name=photo&type=pdf" id="photoa" target="_blank">
                                    <div style=" font-size:18px; font-weight:bold;" align="center">已上传（点击下载）</div>
    </a>
	<br>
	<div style="height:100px;width:150px;margin:0px auto; " id="photodiv"><font
			style=' font-size:14px; font-weight:bold; color:#F00;'>上传成功,如需修改请重新上传</font>
	</div>  
	</div>
    <div id="show" class="overlay" style="display: none">
        <div class="cen">
            正在上传请等待...
        </div>
    </div>
</body>
</html>

三、踩过的坑

1.display: none

开发时需要在弹窗中输入一定信息后才能上传文件，而弹窗的控制是通过样式style="display: none"来控制的。使用这个插件的上传按钮div有设置样式带有style="display: none"的，上传部分会变成一个width和height只有1px的小点儿，导致鼠标无法点击到这个小点从而上传文件按钮失效。
在网上搜了下说是使用uploader.refresh();可解决，其中uploader由上文中初始化方法定义。但试了下没起作用，后来是定义选择PDF文件按钮的div样式如下，解决了此问题。

#xlzsxlzs div:nth-child(2) {
            width: 100% !important;
            height: 100% !important;
        }

---

总结

写此文的目的是主要记录下关于这个display: none的坑，也把webuploader的简单实用介绍了下，希望对看到此文的同学有所帮助。