ajaxFileUpload上传文件带图片预览

背景：上传图片时候需要预览，本来准备用Bootstrap FieInput，但是项目里bootstrap源码被改了，预览效果不能整场展示，于是使用以前用过的ajaxFileUpload来实现效果。如果没有修改bootstrap源码，可以考虑下使用Bootstrap FieInput，功能很多很强大。

一、下载ajaxFileUpload
下载地址：https://github.com/carlcarl/AjaxFileUpload

二、使用
直接上代码
html

<div class="form-group">
	<label  class="col-sm-2 control-label"><span id="picTitle2" style="display:none">公式</span></label>
	<div class="col-sm-10">
		<img class="imgBacgground"  id="pic" src="" style="display: none">
		<input id="quota" name="quota" type="hidden"/><div>
		<!-- 查看预览图 -->
		<div class="dobtn" id="showView" onclick="showView()">上传公式</div>
		<!-- 隐藏的上传控件 通过‘accept’属性限制文件格式 -->
		<input id="uploadfile" name="uploadfile" type="file" accept=".png,.jpg" style="display:none"/>
		<div class="dobtn" onclick="cleanFile()">清空</div>
		<!-- 上传文件 -->
		<div class="dobtn" onclick="uploadFile()"  style="display:none">上传</div>
		</div>
	</div>
</div>

js

	//生成预览图
	function showView(){
		$("#uploadfile").click(); 
		$("#uploadfile").on('change',function(){
			var file = this.files[0];
			var url =getObjectURL(file) ;
			$("#pic").attr("src", url) ; //将图片路径存入src中，显示出图片
			$("#picTitle1").attr("style", "display:none") ; 
			$("#picTitle2").attr("style", "display:display") ; 
			$("#pic").attr("style", "display:diaplsy") ; 
		});
	}
	
	//清空预览图
	function cleanFile(){
		 var obj = document.getElementById('uploadFile') ;  
		 if(obj!=null){
			 obj.outerHTML=obj.outerHTML;  
		 }
		 $("#picTitle2").attr("style", "display:none") ; 
		 $("#picTitle1").attr("style", "display:display") ; 
		 $("#pic").attr("style", "display:none") ; 
		 $("#pic").attr("src", '') ; 
	}
	
	//文件上传
	$.ajaxFileUpload({  
	    url:  ctx + "/examineQuota/uploadImg",
	    secureuri: true,//是否启用安全提交  默认为false
	    fileElementId: "uploadfile", //type="file"的id
	    dataType: 'json', //返回值类型 一般设置为json
	    contentType: "application/x-www-form-urlencoded; charset=utf-8",
	    success: function (data)
	    {
    		//图片上传成功后保存
		alert("保存成功");
	    },
	    error:function(e){
	        alert("网络异常，请稍后重试。");
	    }
	});

java

	@RequestMapping(value = "/uploadImg",method=RequestMethod.POST)
    @ResponseBody
    public void uploadImg(@RequestParam(value = "uploadfile", required = false) MultipartFile multipartFile,
            HttpServletRequest request, HttpServletResponse response)
            throws IOException {
		Map<String,String> map  = new HashMap<>();
		long size = multipartFile.getSize();
		if(!"0".equals(size)){
			//获取项目路径
			String  filePath = ExamineQuotaController.class.getResource("/").getPath();
			filePath = filePath.substring(1, filePath.length()-16);
			//文件保存位置
			filePath += "resources/img/";
			//组装文件名
			String originalFilename = multipartFile.getOriginalFilename();
			int index = originalFilename.lastIndexOf(".");
			//获取文件类型
			String fileType = originalFilename.substring(index, originalFilename.length());
			String newFileName = Tools.getNowTimeOfString() + fileType;
			//将文件保存到指定位置
			String path = filePath+newFileName;  
			File file = new File(path);
			multipartFile.transferTo(file);
			map.put("fileName", newFileName);
		}

ps：使用过程中可能会报 jQuery.handleError is not a function的错，有时候影响使用，有时候不影响使用。解决方法参考下面链接
https://www.cnblogs.com/penciler/p/4305011.html