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获取文件之后,就可以调用后台上传的方法了。


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

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zc474235918/article/details/50419884
文章标签: ajax jquery
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭