简单上传文件插件

team777.upload.js  

js:

;(function(win){
	'use strict';
	var Team777Upload={
		fileUpload:function(){
			var options={
				title:"图片上传",//窗口标题
				//msg:"config消息提示窗！", //消息提示消息
				action:"#",//上传地址
				css:null,
				preview:true,//默认显示缩略图
//				type:"store",//存放的子目录
				ok:true,//是否显示OK按钮
				okTxt:"确认",//oK按钮文字
				cancel:true,//是否显示取消按钮
				cancelTxt:"取消",//取消按钮文字
				cancelCall:function(){
					if(console){
						console.log("取消按钮消息");
					}
				},
				okCall:function(){
					if(console){
						console.log("确认按钮消息");
					}
				}
			}
			var args=arguments;
			if(args.length>0){
				if(typeof(args[0])==="string"){
					options["msg"]=args[0];
				}else if(Team777Common.isJson(args[0])){
					if(args[0]){
						for(var i in args[0]){
							options[i]=args[0][i];
						}
					}
				}
			}
			showUpload(options);
		}
	};
	//显示上传控件
	function showUpload(options){
//		var template="";
		$(".art-upload-modal .art-upload-cancel").unbind("click");
		$(".art-upload-modal .art-upload-file").unbind("change");
		$(".art-upload-modal .art-upload-iframe").unbind("load");
		$(".art-upload-modal .art-upload-sure").unbind("click");
//		$(".art-upload-modal").remove();
		if($(".art-upload-modal").length>0){
			$(".art-upload-modal").modal('show');
			if($(".art-upload-modal .modal-title").length>0){
				$(".art-upload-modal .modal-title").html(options.title);				
			}
			/*if($(".art-upload-modal .art-upload-img").length>0){
				$(".art-upload-modal .art-upload-img").attr("src","");
			}*/			
			if($(".art-upload-modal").length>0){
//				$(".art-upload-modal .art-upload-img").attr("src","");
			}			
			if(options.ok){
				if($(".art-upload-modal .art-upload-sure").length>0){
					$(".art-upload-modal .art-upload-sure").html(options.okTxt);
				}				
			}else{
				$(".art-upload-modal .art-upload-sure").hide();
			}
			if(options.cancel){
				if($(".art-upload-modal .art-upload-cancel").length>0){
					$(".art-upload-modal .art-upload-cancel").html(options.cancelTxt);
				}
			}else{
				$(".art-upload-modal .art-upload-cancel").hide();
			}
			
			/*//iframe加载事件
			if(options.okCall){
				$(".art-upload-modal .art-upload-iframe").on("load",function(){
					var jsonStr=$.trim($(window.frames["upload_iframe"].document.body).html());
					var data=(new Function("return "+jsonStr))();
					if(!data){
					   data={};
					}
					options.okCall(data);
					$(".art-upload-modal").modal('hide');
				});
			}*/
		}else{
			var templateArr=['<div class="modal art-upload-modal">'];
			templateArr.push('<div class="modal-dialog" >');
		    templateArr.push('<div class="modal-content">');
			templateArr.push('<div class="modal-header">');
			templateArr.push('<button type="button" class="close art-upload-close" data-dismiss="modal" aria-hidden="true">&times;</button>');
			templateArr.push('<h4 class="modal-title">'+options.title+'</h4>');
			templateArr.push('</div>');
			templateArr.push('<div class="modal-body">');
			templateArr.push('<div class="art-upload-img-box"></div>');
			templateArr.push('<iframe name="art-upload-iframe" class="art-upload-iframe" width="100%" height="100%" frameborder="0" ></iframe>');
			templateArr.push('<form name="art-upload-form" class="art-upload-form" method="post" action="'+(options.action+'?v=')+'"  enctype="multipart/form-data" target="art-upload-iframe">');
			templateArr.push('<div class="art-upload-box"><i class="fa fa-upload"></i></div>');
			templateArr.push('<input type="file" name="file" class="art-upload-file"/>');
			if(options.type){
				templateArr.push('<input type="hidden" name="type" value="'+options.type+'"/>');
			}
			templateArr.push('</form>');
			templateArr.push('</div>');
			templateArr.push('<div class="modal-footer">');
			if(options.cancel){
				templateArr.push('<button type="button" class="btn btn-white art-upload-cancel" data-dismiss="modal">'+options.cancelTxt+'</button>');
			}
			if(options.ok){
				templateArr.push('<button type="button" class="btn btn-default art-upload-sure">'+options.okTxt+'</button>');
			}
			templateArr.push('</div>');
			templateArr.push('</div>');
			templateArr.push('</div>');
			templateArr.push('</div>');
			$("body").append(templateArr.join(""));
//			
		}
		if(options.preview){
			$(".art-upload-modal .art-upload-file").change(function(){
				showThumbailImage(this,$(".art-upload-img-box")[0]);
			});			
		}else{
			$(".art-upload-modal .art-upload-img").hide();
		}
		//关闭按钮
		$(".art-upload-modal").on("click",".art-upload-close",function(){
			$(".art-upload-modal").modal('hide');
		});
		//取消按钮
		$(".art-upload-modal").on("click",".art-upload-cancel",function(){
			$(".art-upload-modal").modal('hide');
		});
		//确认按钮
		$(".art-upload-modal").on("click",".art-upload-sure",function(){
			var $files=$(".art-upload-form .art-upload-file");
			if($files.length>0&&$files.eq(0).val()==""){
				Team777Dialog.toast("请选择上传的图片！");
				return;
			}
			Team777Dialog.toast({msg:"<p>正在上传...</p>",close:false});
			$("form[name='art-upload-form']").submit();
		});
		
		if(options.css){
			$(".art-upload-modal .modal-dialog").css(css);
		}
		//iframe加载事件
		if(options.okCall){
			$(".art-upload-modal .art-upload-iframe").on("load",function(){
				var jsonStr=$.trim($(window.frames["art-upload-iframe"].document.body).html());
				if(!jsonStr){
					return;
				}
				var data=(new Function("return "+jsonStr))();
				if(!data){
				   data={};
				}
				setTimeout(function(){
					options.okCall(data);
				},2000);
				Team777Dialog.closeToast();
				$(".art-upload-modal").modal('hide');
			});
		}
		
		/*$(".art-upload-modal").on('shown.bs.modal', function () {
			// do something…
//			alert("shown.bs.modal");
			$(".art-upload-modal").modal('show');
		});*/
		$(".art-upload-modal").modal('show');
//		$(".art-upload-modal").show();
	}
	
	function showThumbailImage(file,container){
	    try{ 
	        var pic =  new Picture(file, container); 
	        if(pic.isValid()){
	        	pic.showImage();
	        }
	    }catch(e){ 
	    	Team777Dialog.toast(e);
	    } 
	}
	
	//缩略图类定义 
	function Picture(file, container){
		var allowExt = ['jpg', 'gif', 'bmp', 'png', 'jpeg']; 
		var ext;
	    var self   = this; 
	    if(typeof FileReader == "undified") {
	    	 throw "您老的浏览器不行了！";
	    }
	    if(file){ 
	        name = file.value;	        
	    }else{ 
	        throw '无效的文件'; 
	    } 
	    this.ext = name.substr(name.lastIndexOf("."), name.length); 
	    if(container.tagName.toLowerCase() != 'img'){ 
	        throw '不是一个有效的图片容器'; 
	        container.visibility = 'hidden'; 
	    } 
	    container.style.visibility = 'visible'; 
	    this.showImage=function(){
	    	showDataByURL(file.files[0],container);
	    };
	    this.isValid = function(){ 
	        if(allowExt.indexOf(self.ext) !== -1){ 
	            throw '不允许上传该文件类型'; 
	            return false; 
	        }
	        return true;
	    } 
	}
	
	function showDataByURL(resultFile,container) {
        if (resultFile) {
            var reader = new FileReader();             
            reader.readAsDataURL(resultFile);
            reader.onload = function (e) {
                var urlData = this.result;
                $(container).html('<img class="art-upload-img" src="'+urlData+'">');
            }; 
            
        }
         
    } 
	
	win["Team777Upload"]=Team777Upload;
	/*function initEvent(){
		var $upload_iframe=$("#upload_iframe");
		 $upload_iframe.bind("load",function(){
			 //$upload_iframe.unbind();
			 var jsonStr=$.trim($(window.frames["upload_iframe"].document.body).html());
			 var data=(new Function("return "+jsonStr))();
			 if(!data){
				 data={};
			 }
			 //data.imageName=$("#imgName").val();
//			 data.imageType=$("#imageType").val();
			 window.parent.putUploadImage(data);
		 });
		 
		// add uniform plugin styles to html elements
//		$("input:checkbox, input:radio").uniform();

	}
	
	$(document).ready(function(){
		initEvent();
	});*/
})(window);

 team777.upload.css

.art-upload-modal .art-upload-iframe{
	display:none;
}
.art-upload-modal .art-upload-img-box{
	width:50%;
	margin:5px auto 20px;
}
.art-upload-modal .art-upload-img-box img{
	width:100%;
}
.art-upload-modal .art-upload-form{
	position: relative;
    margin: 0 auto;
    width: 200px;
}
.art-upload-modal i.fa-upload{
	font-size: 80px;
    line-height: 200px;
}
.art-upload-modal .art-upload-file{
	opacity: 0;
    height: 200px;
    width: 200px;
}

.art-upload-modal .art-upload-box{
	position: absolute;
    top: 0;
    text-align: center;
    border: 1px dotted #58666e;
    width: 200px;
    height: 200px;
    margin: 0 auto;
    line-height: 223px;
    border-radius: 20%;
}

使用：

$scope.lockManager.uploadImage=function(item){
					Team777Upload.fileUpload({
						title:"图片上传",
						cover:false,//不显示背景
						img:item.lockPhoto,//锁照片
						action:ctx+"/japi/upload/uploadFileAndImage",
						okCall:function(data){
							var urls=data.url;
							if(urls&&urls.length>0){
								var url=urls[0];
//								$("#img_box").attr("src",ctx+"/"+url);
								$scope.safeApply(function(){
									item.lockPhoto=url;
								});
							}
						}
					});
				}

后台代码：springmvc

/**
     * 文件上传(包括 图片)
     * 
     * @param model
     * @param file
     * @return
     * @throws IOException
     */
    @RequestMapping("/uploadFileAndImage")
    public @ResponseBody String uploadFileAndImage(@RequestParam MultipartFile[] file, Integer type) throws IOException
    {
        JSONObject json = new JSONObject();
        if (null != file)
        {
            List<String> namelist = uploadFiles(file, "file", null, type);
            json.put("url", namelist);
            json.put("error", 0);
            return json.toString();
        }
        json.put("error", 1);
        return json.toString();
    }

/**
     * 多文件上传
     * 
     * @param files
     * @throws IOException
     */
    protected List<String> uploadFiles(MultipartFile[] files, String fileType, Integer type) throws IOException
    {
        List<String> realNames = new ArrayList<String>();
        for (MultipartFile multipartFile : files)
        {
            realNames.addAll(uploadFile(multipartFile, fileType, null, type));
        }
        return realNames;
    }

    /**
     * 多文件上传
     * 
     * @param files
     * @throws IOException
     */
    protected List<String> uploadFiles(MultipartFile[] files, String fileType, Map<String, Object> imgParamMap, Integer type) throws IOException
    {
        List<String> realNames = new ArrayList<String>();
        for (MultipartFile multipartFile : files)
        {
            List<String> urlList = uploadFile(multipartFile, fileType, imgParamMap, type);
            if (CollectionUtils.isNotEmpty(urlList))
            {
                realNames.addAll(urlList);
            }
        }
        return realNames;
    }

    /**
     * 单文件上传
     * 
     * @param file
     * @throws IOException
     */
    protected List<String> uploadFile(MultipartFile file, String fileType, Map<String, Object> imgParamMap, Integer type) throws IOException
    {
        List<String> imagePathList = new ArrayList<>();
        String fileName = file.getOriginalFilename();
        String suffix = "";
        String realName = "";
        String fileUri = "";
        // 如果有后缀
        if (fileName.contains("."))
        {
            suffix = FileUtil.getSuffix(fileName);
        }
        else
        {
            suffix = fileName;
        }

        if (!file.isEmpty())
        {
            realName = StringUtil.getRandomString(3) + "_" + new Date().getTime() + suffix;
            // 默认情况下为图片 上传

            // 默认为图片
            String dirPrefix = UrlConstant.imgUploadDir;
            String urlPrefix = UrlConstant.imgUrl;

            if (!"image".equals(fileType))
            {
                dirPrefix = UrlConstant.fileUploadDir;
                urlPrefix = UrlConstant.fileUrl;
            }
            // 子文件夹
            String subDir = null;
            if (null != type)
            {
                subDir = ImageType.getName(type);
                realName = ((subDir == null) ? "" : subDir.toLowerCase() + "/") + realName;
            }
            String fileName0 = dirPrefix + realName;
            fileUri = urlPrefix + realName;

            File file2 = new File(fileName0);
            FileUtils.copyInputStreamToFile(file.getInputStream(), file2);

            // 在基本的上传完图片后，如果有其它要操作的指令，从map中读取，比如缩放，比如加水印等
            String wrapImageName = wrapImage(imgParamMap, file2);
            if (wrapImageName != null)
            {
                wrapImageName = ((subDir == null) ? "" : subDir.toLowerCase() + "/") + wrapImageName;
            }
            boolean isWrapImageName = false;
            if (StringUtil.isNotEmptyString(wrapImageName))
            {
                isWrapImageName = true;
            }
            wrapImageName = urlPrefix + wrapImageName;
            if (isWrapImageName)
            {
                imagePathList.add(wrapImageName);
            }
            imagePathList.add(fileUri);
            return imagePathList;
        }
        return null;
    }