springMVC+Ajaxfileupload无刷新上传文件返回json串问题

项目环境：springMVC3.0.5+Hibernate3

今天的话题的基点是在前一篇的技术实现上，不知的可以看我前一篇的博客。

昨天我只是单纯地为了实现文件的无刷新上传功能，没有做返回信息操作，才留下了今天这话题，以下就让我们来一起解决这个因为IE版本不同而导致上传文件成功后返回json提示下载的问题吧。

首先，屌丝我的老套路还是前端页面+JS。页面代码前篇博文写了，JS代码有所改动。JS代码如下：

//ajaxFileupload 上传文件
function upload(){  
      
     $.ajaxFileUpload({
    	 	type: "POST",  //提交方式 
            url:'upload.bia',  
            secureuri:false,  
            fileElementId:'busiAttachment',
            dataType: 'text/html',
            success:function(data,status){
            	
            	console.log(data);
            	var json=eval(data);      
            	var messageDiv=document.getElementById("project_document");
            	messageDiv.innerHTML="<input type='text' value='success'/>";
            },
            error : function(data, status, e) {  
  	          alert("系统报错，稍后重试！");  
  	        }
        });  
}

在这里要注意了，dataType一定得写上“text/html”，至于为何，下面会作出解释。

至于为何要写上dataType，我这里说下原因，因为Ajaxfileupload上传文件，如果要执行success：function（）下面的代码块，就必须写上，Ajaxfileupload会根据dataType的内容来执行success：function（），若没写上，这块的代码快递就不会执行。所以，您只要写上就OK了。至于内容为何是text/html，咱现在解决的就是因为IE的版本不同，直接传回json会提示下载，所以懂了吧。

注意点：JS的eval方法，这个方法的用法格式，大家最好去看看，因为返回的数据串格式不同，eval的写法格式也会不同，谨记。

说完了前端页面+JS，咱再来看看后端如何处理。

若不想处理的结果直接返回json串，咱还得在spring的配置文件里，配置如下信息，请看清楚，对比前篇博文的配置内容，配置如下：

<!-- 启动spring注解功能，完成请求和注解的POJO映射 -->
    <bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">
    	<!-- 配置一下对json数据的转换 -->  
        <property name="messageConverters">  
            <list>  
                <bean class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter">
                	<property name="supportedMediaTypes">
                		<list>
                			<value>text/html;charset=UTF-8</value>
                		</list>
                	</property>
                </bean>  
            </list>  
        </property>
    </bean>

跟前篇博文对比发现了没有，咱在这里配置了supportedMediaTypes，并设定它的值为text/html;charset=UTF-8，这也就跟上面JS的dataType想对应了，防止处理结果直接返回json。

好了，配置文件控制了处理后的返回结果，那咱们就来看看后端的处理代码块吧。

后端controller的代码块如下所示，基本上跟前篇内容无差别，因为后端代码块只是实现功能，至于返回处理结果，那都是靠配置文件跟JS来处理的。

//上传文件
	@RequestMapping(value="project/upload",method = RequestMethod.POST)
	@ResponseBody 
	public List<Customer> upload(MultipartHttpServletRequest multipartRequest,HttpServletResponse response) throws FileUploadException, IOException{
		
        DefaultMultipartHttpServletRequest defaultRequest = (DefaultMultipartHttpServletRequest)multipartRequest;  
        MultiValueMap<String, MultipartFile> fileMap =  defaultRequest.getMultiFileMap();
        //得到上传文件
        List<MultipartFile> fileList = fileMap.get("file");  
        MultipartFile file = fileList.get(0);       
        //上传后文件的所在目录
        String dirPath = multipartRequest.getSession().getServletContext().getRealPath("/doc");
        File dir = new File(dirPath);
        //判断文件是否存在，不存在新建
        if(!dir.exists()){  
            dir.mkdir();  
        }
        //设定文件保存位置
        String filename=(new Date().getTime())+file.getOriginalFilename();
        String filePath = dirPath+"/"+filename;  
        File resultFile = inputstreamtofile(file.getInputStream(),filePath);
        System.out.println(resultFile.getPath());
        //设定返回json数据串
        Customer customer=new Customer();
        customer.setCustomer_descr(filename);
        List<Customer> customerList = new ArrayList<Customer>();
        customerList.add(customer);
        return customerList;  
    }
	
	
	public File inputstreamtofile(InputStream ins,String fileName) {  
        File file = new File(fileName);  
        try {  
            OutputStream os = new FileOutputStream(file);  
            int bytesRead = 0;  
            byte[] buffer = new byte[8192];  
            while ((bytesRead = ins.read(buffer, 0, 8192)) != -1) {  
                os.write(buffer, 0, bytesRead);  
            }  
            os.close();  
            ins.close();  
        } catch (Exception e) {  
            e.printStackTrace();  
        }  
        return file;  
    }

好了，防止Ajaxfileupload无刷新上传文件返回json提示下载功能就实现了，若您按照上面进行操作，保证没什么问题。

希望此博文对你有所帮助，有问题可及时联系本屌丝。