jQuery上传文件插件--ajaxFileUpload

最新推荐文章于 2025-07-22 00:13:32 发布

原创最新推荐文章于 2025-07-22 00:13:32 发布 · 296 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#java #jquery #javascript #ajax

JavaScript 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍jQuery的ajaxFileUpload插件使用方法，包括引入资源、页面代码设置、JS调用及Java后台处理流程，适合初学者快速掌握文件上传功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery上传文件，都是写好的ajaxFileUpload插件，这里介绍的是我常用的一个以及它的使用方法。

ajaxFileUpload使用

ajaxFileUpload原理是创建表单并用JS去提交的方式，其中上传是对文件的配置方式和ajax很像，如下代码块所示。

$.ajaxFileUpload({ 
                url: ,                //访问路径
                secureuri:false,       //是否启用安全提交,默认为false
                data:{
                },
                fileElementId:'file',        //文件选择框的id属性
                dataType:'text',//服务器返回的数据类型。可以为xml,script,json,html,text。如果不填写，jQuery会自动判断
                }）

使用方法：

第一步 ，引入js资源，注意要先引入jQuery，再引入ajaxFileUpload，注意顺序；

` <script src="jquery-1.7.1.js" type="text/javascript"></script> ` 
` <script src="ajaxfileupload.js" type="text/javascript"></script>`

第二步，页面代码，这里用了bootstrap的框架，其余代码都差不多；

 <form action="#" id="upLoadForm"
                                      class="form-horizontal form-bordered">
                                    <div class="form-body">
                                        <div class="form-group">
                                            <label class="control-label col-md-2">上传Excel</label>
                                            <div class="col-md-10">
                                                <div class="col-md-4">
                                                    <input style="padding-top: 7px;" type="file" id="file"
                                                           name="file" accept=".xlsx"/>
                                                </div>
                                                <div class="col-md-2">
                                                    <a class="btn blue" id="importantAppUpload">上传</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>

第三步，JS代码；

    $.ajaxFileUpload({
                    url: '',
                    secureuri:false,                       //是否启用安全提交,默认为false
                    data:{ 
                    },
                    fileElementId:'file',        //文件选择框的id属性
                    dataType:'text',                       //服务器返回的格式,可以是json或xml等
                    success:function(data){        //服务器响应成功时的处理函数
                    },
                    error:function(data, status, e){ //服务器响应失败时的处理函数
                
                        swal("操作失败！请重试！");
                    }
                });

第四步，Java后台代码；

 @RequestMapping("/fixedFlashRatioDev")
    @ResponseBody
    public String fixedFlashRatioDev(HttpServletRequest request, @RequestParam(value = "file", required = false) MultipartFile file) {
       
        String target = null, dateType = null;
        if (file == null || file.getSize() == 0) {
            //return "请选择xlsx文件";
            return "1";
        }
        String fileName = file.getOriginalFilename();
        if (fileName.substring(fileName.lastIndexOf(".")).equals(".xlsx")) {
            String path = System.getProperty("java.io.tmpdir") + File.separator + "UploadTxt" + File.separator;
            File targetFile = new File(path, "文件名.xlsx");
            if (!targetFile.exists()) {
                targetFile.mkdirs();
            }
            //保存
            try {
                file.transferTo(targetFile);
                //读取上传的excel文档到数据库（excel文档格式固定）
                Map<String, List<Map>> list = allAuditService.importFixedFlashRatio(path + "f文件名.xlsx", dateType, target);
                if (list == null || list.size() == 0) {
                    //txt解析出错
                    return "2";
                }
                allAuditService.fixedFlashRatio(list);

                return "0";


            } catch (Exception e) {
                e.printStackTrace();
                logger.error("上传文件失败出现异常", e);
                //return "上传文件失败出现异常";
                return "3";
            } finally {
                DataSourceContextHolder.clearDataSource();
            }
        } else {
            //return "只支持xlsx文档";
            return "4";
        }
    }