详细阐述Web开发中的图片上传问题

 @RequestMapping(value = "oneFileUpload", method = RequestMethod.POST)

    public String uploadLoginSplash(HttpServletRequest request, @RequestParam("file") MultipartFile file)

            throws IOException {

        if (!file.isEmpty()) {

            String realPath = request.getSession().getServletContext().getRealPath(SPLASH);

            // 这里不必处理IO流关闭的问题，因为FileUtils.copyInputStreamToFile()方法内部会自动把用到的IO流关掉，我是看它的源码才知道的

            FileUtils.copyInputStreamToFile(file.getInputStream(), new File(realPath, SPLASH_JPG));

        }

        return "manager/setting/settingManager";

    }

b. 上传多个图片。
方法一：
定义多个file，后端用数组接收@RequestParam("file") CommonsMultipartFile[] files。
一种比较灵活的方式是，写JS方法，点击“添加”和“删除”，可以选择增加上传图片的“上传框”。

这种方式，我没有去实践，在CSDN上看到了一篇不错的帖子，属于看了但没有去实践。

方法二：
使用图片上传组件，相比方法一，更加灵活，但也有缺点，后端接收不能直接使用数组CommonsMultipartFile[] files，我尝试了不太行。
前端上传组件，尝试的有webuploader，可以一次性选择多张图片，但是分批上传的。
尼玛，百度了下，原来是百度团队搞的，怪不得看起来用起来，好高端大气的样子。
官网：http://fex-team.github.io/webuploader/

最先用的是，dropzone，感觉还行，但是没有百度的看起来美观，一次性可以选择多张图片，但一次性全部上传。
官网：http://www.dropzonejs.com/
最先的最先，某个同事用的是jquery的上传组件，印象中是的。

后端处理多张图片的代码，比较通用的。

@RequestMapping("/idCardImageUpload")

	public void idCardImageUpload(HttpServletRequest request,

			HttpServletResponse response) throws IllegalStateException,

			IOException {

		// 创建一个通用的多部分解析器

		CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(

				request.getSession().getServletContext());

		String finalFileName="";

		// 判断 request 是否有文件上传,即多部分请求

		if (multipartResolver.isMultipart(request)) {

			// 转换成多部分request

			MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;

			// 取得request中的所有文件名

			Iterator<String> iter = multiRequest.getFileNames();

			while (iter.hasNext()) {

				// 取得上传文件

				MultipartFile file = multiRequest.getFile(iter.next());

				if (file != null) {

					// 取得当前上传文件的文件名称

					String fileName = file.getOriginalFilename();

					// 如果名称不为“”,说明该文件存在，否则说明该文件不存在

					if (StringUtils.isNotEmpty(fileName)) {

						String[] strs = fileName.split("\\.");

						String fileExtention="png";

						// 重命名上传后的文件名

						if(strs.length >=2){

							fileExtention=strs[strs.length-1];

						}

						try {

							fileName = AES.Encrypt(fileName, DateFormatUtil

									.format(new Date(), "yyyyMMddHHmmssSSS")

									.substring(1))+"."+fileExtention;

							finalFileName +=fileName+",";

							// 定义上传路径

							String imagePath = (String) BasePropertyConfigurer

									.getContextProperty("idCardImageUploadPath");

							String path = imagePath + fileName;

							File localFile = new File(path);

							file.transferTo(localFile);

						} catch (Exception e) {

							e.printStackTrace();

						}

					}

				}

			}

			JSONObject jsonObj = new JSONObject();

			response.setContentType("text/html;charset=UTF-8");

			jsonObj.put("success", true);

			jsonObj.put("fileName",finalFileName);

			returnJsonObject(response, jsonObj);

		}

	} 

--------------------------------------------------------------------------------------------
上面介绍了原因，然后重点阐述了前后端的组件和实践方法，下面回归“图片上传问题”的本质，即流程问题。

图片上传流程
第一步：通过上传组件，选择一张或多张图片。
第二步：确定上传，把图片传到后端，后端接收图片，保存到某个位置。
第三步：前端提交表单，包括图片的名字等。

这个问题有点复杂，再补充几点：
第一：上传是可以同步的，也可以是异步的。
比如通过form提交到后端，也可以是通过jquery等插件AJAX提交。
异步提交的时候，需要后端“回显图片信息”，比如图片的名字、图片的URL。

第二：是否允许图片存储位置，有“脏数据”，即没有实际价值的图片。
比如，一个用户选择了图片，上传到了后端，但是表单可能没有提交。

如果，直接把用户的图片，放到实际的存储位置，就有脏数据了，但不影响图片的展示。

另外一种方式是，用户上传的图片，先存到一个特定的临时位置，用户确定上传图片后，把这里的图片移动到，实际的存储位置。

第三：图片信息存到数据库。
个人觉得，只存储图片的名字比较好，至于路径，存到数据库之后，会非常不灵活。
前端展示图片，自定义url路径，比如/image/a.jpg，后端把/image路径映射到实际的图片位置。

第四：图片的名字。
把用户上传时的名字，作为实际存储的图片名字不好，一是中文容易出问题，二是不能保证唯一性，会存在覆盖的可能性。
个人觉得，图片的名字用时间+随机数等方式生成唯一的名字，比如abcd.jpg。
这个时候需要注意，图片的后缀，需要从用户上传的图片名字解析出来，比如从“小雷FansUnion.png”解析出后缀".png"，把
“小雷FansUnion.gif”存为“abcd.png”可能无法正常显示。

第五：图片上传也可以使用云服务。
2014年春，做ITFriend的时候，用的是“美图秀秀的图片上传组件”。云服务用着还是不错的，上传之后，可以立即进行“美化”“涂鸦”等操作。
最终，再保存到数据库。

第六：图片存储也可以使用云服务。。