ajax上传文件:ajaxSubmit使用

原创 2015年12月28日 16:37:09


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

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


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

版权声明:本文为博主原创文章,未经博主允许不得转载。

利用ajaxSubmit无刷新异步上传导入Excel,无刷新提交表单

query.form.js ajaxSubmit
  • gorch
  • gorch
  • 2016年09月10日 10:43
  • 6981

jquery ajaxsubmit上传文件初探

最近想把所有form做成ajax的,于是就采用ajaxsubmit插件,正好这个插件也支持文件上传,于是做个简单的例子测试文件上传 html代码 text 用这个插件的时...

关于使用ajaxSubmit来上传图片

列子如下 文件要引入 $("form.user_data_submit").ajaxSubmit({ url:"User_data_edit", type:"post", data...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

文件上传中submit与ajax的问题与思考

文件上传在项目中经常需要,先上一段代码,用的easyUI 任务名称:...

使用ajaxSubmit异步上传图片并展示

页面在选择图片完成后将图片上传到图片服务器,并在页面显示图片,然后将上传图片的路径加载到隐藏域中,提交表单时将路径保存到数据库。...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

使用ajax提交form表单,包括ajax文件上传

使用ajax提交form表单,包括ajax文件上传 http://www.cnblogs.com/zhuxiaojie/p/4783939.html 前言 使用ajax请求数...

jquery的ajaxSubmit()和多文件上传

String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServ...
  • smeyou
  • smeyou
  • 2012年10月30日 11:19
  • 11951

用jquery.form.js 实现ajax提交含有上传文件和普通字段的表单

前两天用到ajax提交含上传图片的表单。实现的功能比较简单,但是使用ajax提交表单 form.serialize只能实现普通的字段提交,上传图片却不能使用。 网上很多都是推荐使用jquery.fo...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ajax上传文件:ajaxSubmit使用
举报原因:
原因补充:

(最多只允许输入30个字)