使用FormData对象ajax异步方式上传图片，文件

HTML代码

<div id="uploadForm">
    <input id="file" type="file"/>
    <button id="upload" type="button">upload</button>
</div>

这里没有<form>标签，也没有enctype="multipart/form-data"属性。

javascript代码

var formData = new FormData();
formData.append('myfile', $('#file')[0].files[0]);
$.ajax({
    url: '请求路径/uploadPic',
    type: 'POST',
    cache: false,
    data: formData,
    processData: false,
    contentType: false
}).done(function(res) {
}).fail(function(res) {});

这里有几处不一样：

• append()的第二个参数应是文件对象，即$('#file')[0].files[0]。
• contentType也要设置为‘false’。

从代码$('#file')[0].files[0]中可以看到一个<input type="file">标签能够上传多个文件，
只需要在<input type="file">里添加multiple或multiple="multiple"属性。

java代码

@RequestMapping(value = "/uploadPic",produces = "application/json")
@ResponseBody
	public Object importPicFile(String picParams, MultipartFile myfile, HttpServletRequest request,HttpServletResponse response)
			throws IOException {
		Map<String, Object> resultMap = new HashMap<String, Object>();
		Map<String, Object> map = new HashMap<String, Object>();
		if (myfile.isEmpty()) {
			map.put("result", "error");
			map.put("msg", "上传文件不能为空");
			return String. valueOf(JSONObject.fromObject (resultMap));
		} else {
			String originalFilename = myfile.getOriginalFilename();
			// String fileBaseName=FilenameUtils.getBaseName(originalFilename);
			String dirName = "image";
			// 定义允许上传的文件扩展名
			HashMap<String, String> extMap = new HashMap<String, String>();
			extMap.put("image", "gif,jpg,jpeg,png,bmp");
			// 检查扩展名
			String fileExt = originalFilename.substring(originalFilename.lastIndexOf(".") + 1).toLowerCase();
			if (!Arrays.<String>asList(extMap.get(dirName).split(",")).contains(fileExt)) {
				resultMap.put( "result", "error");  
				resultMap.put( "msg", "上传文件扩展名是不允许的扩展名。\n只允许" + extMap.get(dirName) + "格式。" );
				return String. valueOf(JSONObject.fromObject (resultMap));
				//return Results.byMessage(ShowTextUtils.FAIL, "上传文件扩展名是不允许的扩展名。\n只允许" + extMap.get(dirName) + "格式。");
			}
			// 设置目录
			if (IConstants.ISDEMO.equals("1")) {
				dirName = "demo/file/sys/" + dirName + "/" + new SimpleDateFormat("yyyy/yyyyMMdd").format(new Date());
			} else {
				dirName = "file/sys/" + dirName + "/" + new SimpleDateFormat("yyyy/yyyyMMdd").format(new Date()) + "/";
			}
	
			// 文件保存目录路径
			String savePath = getFilePath() + dirName;
			// 新文件名
			String newFileName = getFileName() + "." + fileExt;
			
			 // 检查目录
			File uploadDir = new File(savePath);
			if (!uploadDir.isDirectory()) {
				uploadDir.mkdirs();
			}
			// 检查目录写权限
			if (!uploadDir.canWrite()) {
				resultMap.put( "result", "error");  
				resultMap.put( "msg", "上传目录没有写权限。");
				return String. valueOf(JSONObject.fromObject (resultMap));
			}
			
			try {
				// 把上传的图片放到服务器的文件夹下
				FileUtils.copyInputStreamToFile(myfile.getInputStream(), new File(savePath, newFileName));

			} catch (Exception e) {
				resultMap.put( "result", "error");  
				resultMap.put( "msg", e.getMessage() );
				return String. valueOf(JSONObject.fromObject (resultMap));
				//return Results.byMessage(ShowTextUtils.FAIL, e.getMessage());
			}
			// 上传文件
			File uploadedFile = new File(savePath, newFileName);
			// 上传阿里云(没有这个需求可以注释掉)
			upyun = new UpYun(BUCKET_NAME, OPERATOR_NAME, OPERATOR_PWD);
			upyun.setDebug(false);

			// 要传到upyun后的文件路径
			String filePath = "/" + dirName + "/" + getFileName() + "." + fileExt;

			// 设置待上传文件的 Content-MD5 值
			// 如果又拍云服务端收到的文件MD5值与用户设置的不一致，将回报 406 NotAcceptable 错误
			upyun.setContentMD5(UpYun.md5(uploadedFile));

			// 上传文件，并自动创建父级目录（最多10级）
			boolean result = upyun.writeFile(filePath, uploadedFile, true);

			if (result) {
				filePath = URL + filePath;
			}
			resultMap.put( "result", "success");  
			resultMap.put( "msg", "上传图片成功" );
			resultMap.put( "filePath", filePath );
			return String. valueOf(JSONObject.fromObject (resultMap));
			}
	}
	public String getFilePath() {
		String os = System.getProperty("os.name");
		if (os.toLowerCase().startsWith("win")) {
			// 正式环境Web所在目录
			return "F:/soft/image/webapps/ROOT/";
		} else {
			// 正式环境 linux 目录 /opt/tomcat-instance/web/webapps/ROOT/ +
			// “WEB-INF/outHtml/***.jsp”
			return "/opt/tomcat-instance/dx_manager/ROOT/";
		}

	}

	public String getFileName() {
		SimpleDateFormat simpledateFormat = new SimpleDateFormat("yyyyMMddHHmmss");
		Random random = new Random();
		return simpledateFormat.format(new Date()) + random.nextInt(10000);
	}