WebUploader 修改样式

       WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用原来的FLASH运行时，兼容IE6+，iOS 6+, android 4+。两套运行时，同样的调用方式，可供用户任意选用。

       WebUploader官方的地址：http://fex.baidu.com/webuploader/  

                             github地址：https://github.com/fex-team/webuploader

      在官方的demo里面有一个上传图片的demo，但是上传其他格式的文件时会显示不能预览，所以修改了一下

       主要是修改成不是图片格式时可以显示另外的样式，修改后的效果如下：

当选择的文件不是图片格式时显示对应的图标，并且把名称也显示出来，使用的是阿里的图标。修改的主要代码如下

upload.js

 //图片预览
                //$wrap.text( '预览中' );
				if (file.type.match( /^image/ ) ) {
                uploader.makeThumb( file, function( error, src ) {
                    var img;

                    if ( error ) {
                        $wrap.text( '不能预览' );
                        return;
                    }

                    if( isSupportBase64 ) {
                        img = $('<img src="'+src+'">');
                        $wrap.empty().append( img );
                    } else {
                        $.ajax('../../server/preview.php', {
                            method: 'POST',
                            data: src,
                            dataType:'json'
                        }).done(function( response ) {
                            if (response.result) {
                                img = $('<img src="'+response.result+'">');
                                $wrap.empty().append( img );
                            } else {
                                $wrap.text("预览出错");
                            }
                        });
                    }
                }, thumbnailWidth, thumbnailHeight );
                }else{
					//不是图片就显示图标
					var name=file.name;
				    var fileExtension = name.substring(name.lastIndexOf('.') + 1);
					//$title.hide();
					$wrap.append(getFileIcon(fileExtension));
					
				}

   function getFileIcon(fileType){
			//视频
			var video_type = new Array("avi","wmv","mpg","mpeg","mov","rm","ram","swf","flv","mp4","wma","avi","rm","rmvb","flv","mpg","mkv");
			//音乐
			var music_type = new Array("mp3","ogg","wav","aac");
			var word_type = new Array("doc","docx","DOC","DOCX");
			var zip_type = new Array("zip","rar");
			var excel_type = new Array("xls","xlsx")
			if(video_type.indexOf(fileType)!=(-1)){
				return '<svg class="icon" aria-hidden="true"><use xlink:href="#icon-shipin"></use></svg>';
			}
			if(music_type.indexOf(fileType)!=(-1)){
				return '<svg class="icon" aria-hidden="true"><use xlink:href="#icon-mu"></use></svg>';
			}
			if(zip_type.indexOf(fileType)!=(-1)){
				return '<svg class="icon" aria-hidden="true"><use xlink:href="#icon-ZIP"></use></svg>';
			}
			if(excel_type.indexOf(fileType)!=(-1)){
				return '<svg class="icon" aria-hidden="true"><use xlink:href="#icon-ECEL"></use></svg>';
			}
			switch(fileType)
				{
					case "ppt":
						return '<svg class="icon" aria-hidden="true"><use xlink:href="#icon-PPT"></use></svg>';
						break;
					case "pdf":
						return '<svg class="icon" aria-hidden="true"><use xlink:href="#icon-PDF"></use></svg>';
						break;
					case "pdf":
					    return '<svg class="icon" aria-hidden="true"><use xlink:href="#icon-PDF"></use></svg>';
					    break;
					case "txt":
					    return '<svg class="icon" aria-hidden="true"><use xlink:href="#icon-TET"></use></svg>';
					    break;
					default:
						return '<svg class="icon" aria-hidden="true"><use xlink:href="#icon-zonghewendang"></use></svg>';
				}
		}

如果想使用自己的图标，只需要把图标换成自己的就可以了，其他的功能基本一致。

如果是想自己修改样式的，可以参考这里修改

//这里加自己的html样式
$wrap.append(getFileIcon(fileExtension));

修改后的demo地址：https://download.csdn.net/download/qq_39098505/19827737