Jquery.Uploadify 图片上传使用

Controller

  @Value("${file.path}")
    private String filePath;

   @RequestMapping(value = "/uploadImage")
    @ResponseBody
    public String uploadImage(MultipartFile img){
        String fileName = UploadUtil.upload(img, filePath);
        return fileName;
    }

application.properties

#文件的磁盘路径
file.path=D://upload
spring.resources.static-locations=classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/,file:${file.path}

文件上传工具类

public class UploadUtil {

	/**
	 * 处理文件上传
	 * @param basePath
	 *            存放文件的目录的绝对路径 servletContext.getRealPath("/upload")
	 */
	public static String upload(MultipartFile file, String basePath) {
			//获取文件名称
			String orgFileName = file.getOriginalFilename();
			//使用随机数生成文件名称,加点和文件的后缀
			String fileName = UUID.randomUUID().toString() + "."
					+ FilenameUtils.getExtension(orgFileName);
			try {
				//新建一个File实例,放入要存的抽象路径,文件的名字
				File targetFile = new File(basePath, fileName);
				//使用注解流的方式把图片写入文件中
				FileUtils.writeByteArrayToFile(targetFile, file.getBytes());
			} catch (IOException e) {
				e.printStackTrace();
			}
			return fileName;
		}
}

整理用过的相关属性与方法：

属性	作用
auto	是否自动上传，默认true
uploadScript	上传路径
fileObjName	file文件对象名称
buttonText	上传按钮显示文本
queueID	进度条的显示位置
fileType	上传文件类型
multi	是否允许多个文件上传，默认为true
fileSizeLimit	允许文件上传的最大尺寸
uploadLimit	一次可以上传的最大文件数
queueSizeLimit	允许队列中存在的最大文件数
removeCompleted	隐藏完成上传的文件，默认为false
方法	作用
onUploadComplete	文件上传成功后执行
onCancel	文件被删除时触发
onUpload	开始上传队列时触发
onFallback	HTML5 API不支持的浏览器触发

例子如下：

　　1.首先页面需要引进js和css文件

　　2.uploadifive控件的具体应用

$(function() {
    $('#signup-idimage1').uploadifive({
        'auto' : true,
        'uploadScript' : '/uploadImage',
        'fileObjName' : 'upload',
        'buttonText' : '上传照片',
        'queueID' : 'tip-queue1',
        'fileType' : 'image/*',
        'multi' : false,
        'fileSizeLimit'   : 5242880,
        'uploadLimit' : 1,
        'queueSizeLimit'  : 1,   
        'onUploadComplete' : function(file, data) {
            var obj = JSON.parse(data);
            if (obj.img == "500") {
                alert("系统异常！");
            } else {
                $("#frontSide").val(obj.img);
                document.getElementById("submit").disabled = false;
            }
        },
        onCancel : function(file) {
           $("#frontSide").val("");
            /* 注意：取消后应重新设置uploadLimit */
            $data    = $(this).data('uploadifive'),
            settings = $data.settings;
            settings.uploadLimit++;
            alert(file.name + " 已取消上传~!");
        },
        onFallback : function() {
            alert("该浏览器无法使用!");
        },
        onUpload : function(file) {
            document.getElementById("submit").disabled = true;//当开始上传文件，要防止上传未完成而表单被提交
        },
    });
});

　　3.简化后的页面

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1">
<title>注册</title>
<link rel="stylesheet" type="text/css"
    href="../uploadiFive/uploadifive.css" />
<script src="../js/jquery-1.7.2.js"></script>
<script src="js/mobileupload.js"></script>
<script src="../uploadiFive/jquery.uploadifive.js"></script>
</head>
<body>
            <form class="cd-form" id="subForm"
                action="openaccount" method="post">
                    <div id="cd-signup">
                        <p class="fieldset">
                            <label class="image-replace cd-photo1" for="signup-idimage1"></label>
                            <input class="full-width has-padding has-border"
                                id="signup-idimage1" type="file" name="upload">
                            <input type="hidden" name="frontSide" id="frontSide">
                        <div id="tip-queue1"></div>
                        </p>
                        </p>
                        <p class="fieldset">
                            <input class="full-width2" id="submit" type="submit" value="提交">
                        </p>
            </form>
</body>
</html>

pom.xml

<!--上传文件工具类-->
            <dependency>
                <groupId>commons-io</groupId>
                <artifactId>commons-io</artifactId>
                <version>2.4</version>
            </dependency>

Jquery.Uploadify 图片上传使用

猜你喜欢