ajax上传图片、下载图片

目录

一、上传图片

二、下载（展示）图片

---

一、上传图片

        （1）jsp中：

<form id="fm">
    支出项目：<select name="type">
                <option value="1">车费</option>
                <option value="2">饭费</option>
            </select>
    <!-- 必须得file类型 -->
    上传图片：<input type="file" id="fileName" name="fileName"><br>

            <input type="button" value="提交" onclick="submitFun()">
</form>

<script type="text/javascript">
    function submitFun(){
        <!-- 通过formData获取表单内的键值对 -->
        var formData = new FormData(document.getElementById("fm"));
        <!-- 如果想往formData中自定义值，也可以这样 -->
        <!-- formFile.append("user", "sddr"); -->
        <!-- 通过ajax提交数据 -->
        $.ajax({
            url:"${ctx}/sddr/add",
            type:'post',
            dataType:'json',
            contentType: false,
            processData: false,
            data:formData,
            success:function(result){
                if(result.code != '200'){
                    layer.msg(result.msg);
                    return;
                }
                parent.location.href = "${ctx}/sddr/toShow";
            }
        });
    }
</script>

        （2）java后端接收

@RequestMapping("add")
public void add(Integer type, MultipartFile fileName) throws Exception {
    //type可直接获取到
    System.out.println(type);
    //文件保存 这里的fileName1是后台保存的图片名(UUID)
    String fileName1 = FileUtils.upLoad(fileName, "D:/sddr/");
}

            注：FIleUtils工具类中的upload方法：

public static String upLoad(MultipartFile fileName, String filePath) throws Exception {
	if (null != fileName && !fileName.isEmpty()) {
		// 存入的文件名要唯一
		String fileNameUUID = UUID.randomUUID().toString().replace("-", "");
		String fileSuffix = fileName.getOriginalFilename()
				.substring(fileName.getOriginalFilename().lastIndexOf("."));
		// 文件夹不存在时创建
		String mir = filePath;
		File file = new File(mir);
		if (!file.exists()) {
			file.mkdirs();
		}
		// 把页面的图片复制到服务器
		fileName.transferTo(new File(mir + fileNameUUID + fileSuffix));
		return fileNameUUID + fileSuffix;
	}
	return null;
}

二、下载（展示）图片

        （1）jsp里：

<img alt="" src="${ctx}/sddr/download?fileName=${imageName}" width="70px"/>

     上面这是展示，如果新建一个<input>标签把type改为按钮，value写成上面src中的值，就是下载了。

        （2）java后端

@RequestMapping("download")
public void download(String fileName, HttpServletResponse response) throws Exception {
    FileUtils.downLoad(response, fileName, "D:/sddr/");
}

        注：FIleUtils工具类中的download方法：

public static void downLoad(HttpServletResponse response, String fileName, String filePath) throws Exception {
	if(!StringUtils.isEmpty(fileName) && !"null".equals(fileName)) {
		FileInputStream in = new FileInputStream(new File(filePath + fileName));
		OutputStream out = response.getOutputStream();
		IOUtils.copy(in, out);
	}
}