ajax异步上传图片

/ajax异步上传图片/
1、java 后台代码

   /**参考https://blog.csdn.net/qq_38762237/article/details/81282444
	 * ajax 上传图片 只支持jdk1.7以上+tomcat8.0
	 * @Description  TODO
	 * @Author panshengwu
	 * @Date 2019年8月25日 下午2:59:01  
	 * @return
	 */
	@RequestMapping(value="/uploadPerInfoImg.do")
	@ResponseBody
	public Map<String, Object>  uploadPerInfoImg(HttpServletRequest req,Personel per,
			@RequestParam(value = "file") MultipartFile file, Model model, 
    		HttpServletRequest request){
		Map<String, Object> map=new HashMap<String, Object>();
		String fileName="";
		//获取工程名(获取绝对位置)
		String conetextPath=request.getSession().getServletContext().getContextPath();
		//上传文件
		if (!file.isEmpty()) {
			    fileName= file.getOriginalFilename();  // 文件名
		        String suffixName = fileName.substring(fileName.lastIndexOf("."));  // 后缀名
		        //String filePath = "D://temp-rainy//"; // 上传后的路径
		        String filePath = request.getSession().getServletContext().getRealPath("/fileStorage/");//文件存放位置
		        fileName = UUID.randomUUID() + suffixName; // 新文件名
		        File dest = new File(filePath+fileName);
		        if (!dest.getParentFile().exists()) {
		            dest.getParentFile().mkdirs();
		        }
		        try {
		            file.transferTo(dest);
		        } catch (IOException e) {
		            e.printStackTrace();
		        }
        }
		String filename ="/fileStorage/" + fileName;
		String filename2 =conetextPath+"/fileStorage/"+ fileName;
		System.out.println("图片上传路径："+filename2);
		map.put("filename", filename);
		map.put("filename2", filename2);
		return map;
	}

2、 js文件

    /*ajax 上传图片*/
     function uploadPerInfoImg() {
	    var fileUpload=$("#file").val();
        if($("#file").val() != "") {
            $.ajaxFileUpload({
                type: "POST",
                url:"${pageContext.request.contextPath}/uploadPerInfoImg.do",
                dataType: "json",
                fileElementId:"file",  // 文件的id
                success: function(data){
                    if(data.filename!='') {
                        alert("上传成功");
                        //图片显示
                        $("#picture").attr("value",data.filename);
                        $('#avatarShow').attr("src", data.filename2);
                    }
                },
                async:false,//同步
                error: function () {
                    alert("上传失败");
                },
            });
        } else {
            alert("请先选择文件");
        }
    }

3、html文件

<!-- 模态框（Modal） -->
	<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" 
							aria-hidden="true">×
					</button>
					<h4 class="modal-title" id="myModalLabel">
						user info modify
					</h4>
				</div>
				<input type="file" name="file" id="file" multiple class="file-loading" onchange="uploadPerInfoImg()" />
				<div class="media-right" >
					      <img src="https://static.runoob.com/images/mix/img_avatar.png" class="media-object"
					       id="avatarShow" name="avatarShow"
						   style="width:450px;height:348px;border: 1px solid gray;border-radius:30px;"/>
	            </div>
				<form    class="bs-example bs-example-form" role="form" 
					id="form" name="form"	method="post" action="${pageContext.request.contextPath}/improvePerInfo.do">
					<div class="modal-body">
						<div style="padding: 100px 100px 10px;">
						        <div class="input-group input-group-sm">
					                 <input name="picture" id="picture" type="text" class="form-control" style="">
                                </div>
								<br>
								<div class="input-group input-group-sm">
					            <span class="input-group-addon">@</span>
					                 <input type="text" class="form-control" placeholder="please add your describtion" name="perDes" id="perDes">
                                </div>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" 
								data-dismiss="modal">close
						</button>
						<input type="submit" class="btn btn-primary"  value="submit" />
					</div>
				</form>
			</div><!-- /.modal-content -->
		</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->

总结：通过ajax 方式 动态绑定下拉选项值，不管是jsp 还是前后端分离的html思路是一样的。
ps:要导入 jquery 文件和bootstrap等必要文件。

     <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitterbootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script src="${pageContext.request.contextPath}/static/js/ajaxfileupload.js"></script>	

效果：