ajax上传文件：ajaxSubmit使用

       大多上传文件的时候，都是使用表单的方式进行提交的。

使用form表单上传文件，也有很多种方式：

       1、界面上直接使用submit按钮提交。这种方式可以实现效果但是没有success事件。即，可以上传文件，但是没有反馈信息。
       2、使用jquery的form方法提交表单，这种提交方式，可以对表单指定 onSubmit、success、error事件。这种方式会更加友好一些。

问题原因：通常使用Jquery就可以实现文件的上传。

       因为最近我们系统中的一些原因，导致Jquery的$与前台架构bootstrap上的$有冲突，所以如果使用前台框架之后，Jquery的$里面没有form方法。这就有些麻烦了。
       如果是用上面第一种方式提交文件的话，那么的确可以，就是不太友好。

所以为了解决上述遇到的问题，可以有两种解决方案:
       1、解决冲突，毕竟JQuery和前台框架都不可少的。
       2、重新寻找上传表单的方法。

       经过查找决定使用ajax进行文件的上传。网上一搜，找到了一个插件，使用ajaxFileupload方法提交。

接下来看一个实例，简单实现文件的上传。

示例

前台：

<script type="text/javascript">
    /**
    * 上传文件（step.js中需要用的方法）
    * @param formTag
    */
    function uploadFile(){
        $.ajaxFileUpload({ 
            method:"POST",
            url:ctx+"/leadtoQuestionTypes/ImportMongoMedia",            //需要链接到服务器地址  
            secureuri:true,  
            fileElementId:'fileName',                        //文件选择框的id属性 
            data:$('#picForm').serialize(),
            success: function(data,s, status){ 
            //上传成功之后的操作
            },error: function (data, status, e){ 
            //上传失败之后的操作
            }  
        });
    }
</script>

<form method="post" enctype="multipart/form-data">          
        <input type="file" id="fileName" name="fileName"  style="display:-webkit-inline-box;width: 180px;"/>
        <input type="button" style="width:70px;" src="image/backGroup.png" onclick="uploadFile()" value="上传文件">         
</form>

Controller(Spring MVC)

@RequestMapping("ImportMongoMedia")
public String ImportMongoMedia(@RequestParam(value = "fileName") MultipartFile file,
        HttpServletRequest request, HttpServletResponse response)
        throws UnsupportedEncodingException {

    MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
    //获取上传的文件
    MultipartFile file1 = multipartRequest.getFile("fileName");

    //获取文件名
    String fileName = file.getOriginalFilename();
    //获取文件路径
    String logoRealPathDir = request.getSession().getServletContext()
            .getRealPath(fileName);

    File localFile = new File(logoRealPathDir);

    try {
        file1.transferTo(localFile);
    } catch (IllegalStateException | IOException e) {
        e.printStackTrace();
    }

    String MediaID = UUID.randomUUID().toString();

    LinkedHashMap map = new LinkedHashMap();

    MongoUtil mongoUtil = new MongoUtil();
    mongoUtil.uploadFile(localFile, MediaID, dbName, collectionName, map);

    return MediaID;
}

controller获取文件之后，就可以调用后台上传的方法了。

       虽然可以实现，但$冲突的问题还是需要解决。对于一种功能的实现，只有掌握多种实现方式，才能实现无困难编码，才能挑选高性能的方案。