上传文件插件uploadify应用简单说明

文件上传插件uploadify的应用

官网：http://www.uploadify.com/，里面的doc写的不错，有实际的例子来对各个参数的说明

下面简单说一下spring mvc 对此插件的应用

1） 在Web.xml的配置

需要在web.xml添加multipart-config,如下所示

<servlet>
        <servlet-name>AcrWeb</servlet-name>
        <servlet-class>
            org.springframework.web.servlet.DispatcherServlet
        </servlet-class>
        <load-on-startup>1</load-on-startup>
        <multipart-config>
            <max-file-size>52428800</max-file-size>
            <max-request-size>52428800</max-request-size>
            <file-size-threshold>0</file-size-threshold>
        </multipart-config>       
    </servlet>

2） 在spring的application.xml（名字不一定是application）的配置

需要在该配置文件下添加一个如下的bean

<!-- spring mvc +servlet3.0上传文件配置 -->
    <bean id="multipartResolver"  
         class="org.springframework.web.multipart.support.StandardServletMultipartResolver">
    </bean>

3） 在jsp页面中需要引入一些相关的该插件的包

<script src="<c:url value="/asset/admin/js/uploadify/jquery.uploadify.min.js"/>"></script>

4） 定义一个选择文件的input框

<div class="box-body">
   <span class="label input g1">上传apk</span>
   <input id="apk_upload" name="apk_upload" type="file"/>
   <input id="apkUrl" type="hidden" name="apkUrl"/>						        				 	
</div>

5） Input file与插件进行绑定

代码如下

$("#apk_upload").uploadify({
    		swf: "<c:url value='/asset/admin/js/uploadify/uploadify.swf'/>",
            //cancelImg	: "<c:url value='/asset/admin/js/uploadify/uploadify-cancel.png'/>",
    		uploader: "/acr/admin/app/apkupload",
    		fileObjName: "file",//对应着文件输入框
    		width:300,
    		buttonText: '<img src="/acr/asset/admin/js/uploadify/upload.png" />',
    		// onInit: function () { $(".uploadify-queue").hide();  },
    		//removeCompleted : false,
            onUploadSuccess : function(file, data, response) {
            	$("#apkUrl").val(data);
            },
            onUploadError : function(file, errorCode, errorMsg, errorString) {
                alert('文件 ' + file.name + ' 上传失败: ' + errorString);
            }
    	});

注意:该插件的uploadify.swf文件时放入到项目的某一个文件下面

Uploader的值对应的是url,该值映射到了springmvc的一个方法，该方法是文件上传的核心，负责把文件写到指定位置的地方去。

6） Spring 后台代码的实现

@RequestMapping(value = "/apkupload", method=RequestMethod.POST)
	public @ResponseBody String apkUpload(
			@RequestParam MultipartFile file,
			Model model,
			HttpServletRequest request) throws IOException {
		InputStream input = null;
		OutputStream output = null;	
		String root = "H:/file";
		//生成了文件名字
		String filename = file.getOriginalFilename();
		//文件要上传的位置
		String fileFullName = buildUpPath(root, filename);
		try {
			File dir = new File(root);
			if(!dir.exists()){
				dir.mkdirs();
			}
			input = file.getInputStream();
			output = new FileOutputStream(new File(fileFullName));
			//保存文件
			IOUtils.copy(input, output);
		} catch (Throwable e) {			
			throw e;
		}finally{
			IOUtils.closeQuietly(input);
			IOUtils.closeQuietly(output);
		}
		return root+"/"+filename;
	}

其中filename对应着步骤5的onUploadSuccess中的data