表单中文件上传问题

传统的方式：

<form id= "uploadForm" action= "http://localhost:8080/upload/addfile" method= "post" enctype ="multipart/form-data">  
     <p >指定文件名： <input type ="text" name="filename" /></p>  
     <p >上传文件： <input type ="file" name="file" /></p>  
     <input type ="submit" value="上传"/>  
</form>  

问题：这种提交，会导致表单页面刷新，若实际中该表单只是页面的一个模块，提交时，我们不希望页面刷新，这种方式就不行了。我们需要ajax异步提交。

 $.ajax({
            type: "POST",   
            url:"/upload/addfile",  
            data:$( '#uploadForm').serialize()                                                                                                                             
            async:false,
            error: function(request) {
            },
            success: function(data) {

            }

        });

上面这种提交只能提交一般的参数，若是文件是无法发送数据到后台的。

在网上找到解决办法：使用FormData对象

利用FormData对象,你可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个”表单”.

1 可以先创建一个空的FormData对象,然后使用append()方法向该对象里添加字段：

var formData = new FormData();  //空对象
forData.append("name","shiminghui");    //添加数据
 $.ajax({
            type: "POST",   
            url:"/upload/addfile",  
            data:forData，               //发送数据                                                                                                              
            async:false,
            processData: false,  // 告诉jQuery不要去处理发送的数据
            contentType: false   // 告诉jQuery不要去设置Content-Type请求头
            error: function(request) {
            },
            success: function(data) {

            }

        }); 

2 用一个已有的form元素来初始化FormData对象,只需要把这个form元素作为参数传入FormData构造函数

var formData = new FormData($("#uploadForm")); //若表单中有file输入域，也可以上传。

后台Controller代码 （基于SpringMVC），不过都一样：

@Controller（"/upload"）
public class UPload{
    //使用Spring提供的通用的多部分解析器 CommonsMultipartResolver
    @RequestMapping(value = "/addfile")
    public void upload(HttpServletReqeust reqeust){
        CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(request.getSession()
                .getServletContext());
        if (multipartResolver.isMultipart(request)) {
            MultipartHttpServletRequest multiRequest = multipartResolver.resolveMultipart(request);
            String filePath = null;
            //解析普通的表单参数
                Map<String, String> parmas = this.parse(multiRequest.getParameterMap());
            // 获取文件
            Iterator<String> iter = multiRequest.getFileNames();
            while (iter.hasNext()) {
                CommonsMultipartFile file = (CommonsMultipartFile) multiRequest.getFile(iter.next());
                //得到文件后具体的保存
                SimpleDateFormat df = new SimpleDateFormat("yyyyMMdd");
            filePath += df.format(new Date()) + "/";
            String fileFormat = file.getOriginalFilename();
            filePath += fileFormat;
            File localFile = new File(filePath);
            if (!localFile.exists()) {
                localFile.mkdirs();
            }
            try {
                file.transferTo(localFile);
            } catch (Exception e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
            }
        }

    }
    private Map<String, String> parse(Map params) {
        if (params == null)
            return null;

        Map<String, String> result = new HashMap<String, String>();
        for (Object key : params.keySet()) {
            if (params.get(key) != null && params.get(key) instanceof String[]
                    && ((String[]) params.get(key)).length == 1) {
                result.put((String) key, ((String[]) params.get(key))[0]);
            }
        }
        return result;
    }
}