jquery流上传获取文件以及请求参数

前言

javaEE开发中比较常用的form表单提交,因为表单提交的方式基本是json,这样在后台直接可以通过request.Pramater()获取,但是如果涉及到文件提交呢?一种常用的方式就是以流的方式提交,这样一来,后台是无法直接获取的,具体步骤如下。

前端

function submit(){
    var formData = new FormData();
    formData.append('file', $('#file')[0].files[0]);
    formData.append('description',$("#description").val());

   $.ajax({
        type: "POST",
        url:"file/upload",
        data:formData,
        contentType: false,  
        processData: false, 
        success: function(data) {
            data = JSON.parse(data);
            if(data.success){
                alert("上传成功");
            }else{
                alert(data.codes);
            }
        }
    });
}

后端


    // 上传配置
    private static final int MEMORY_THRESHOLD   = 1024 * 1024 * 3;  // 3MB
    private static final int MAX_FILE_SIZE      = 1024 * 1024 * 50; // 50MB
    private static final int MAX_REQUEST_SIZE   = 1024 * 1024 * 100; // 100MB

    // 上传文件存储目录
    private static final String UPLOAD_DIRECTORY = "fileDir";


        // 配置上传参数
        DiskFileItemFactory factory = new DiskFileItemFactory();
        // 设置内存临界值 - 超过后将产生临时文件并存储于临时目录中
        factory.setSizeThreshold(MEMORY_THRESHOLD);
        // 设置临时存储目录
        factory.setRepository(new File(System.getProperty("java.io.tmpdir")));

        ServletFileUpload upload = new ServletFileUpload(factory);

        upload.setFileSizeMax(MAX_FILE_SIZE);
        upload.setSizeMax(MAX_REQUEST_SIZE);

        // 上传文件存储目录
        String uploadPath = request.getServletContext().getRealPath("./") + UPLOAD_DIRECTORY;

        // 如果目录不存在则创建
        File uploadDir = new File(uploadPath);
        if (!uploadDir.exists()) {
            uploadDir.mkdir();
        }

        try {
            List<FileItem> formItems = upload.parseRequest(request);
            Map<String, Object> params = new HashMap<String, Object>();
            if (formItems != null && formItems.size() > 0) {
                // 迭代表单数据
                for (FileItem item : formItems) {           
                     if (item.isFormField()) {
                         //请求参数
                         params.put(item.getFieldName(),item.getString());

                     }else {
                         //文件
                         String fileName = new File(item.getName()).getName();
                         String filePath = uploadPath + File.separator + fileName;
                         String fileSize = String.valueOf(item.getSize());
                         File storeFile = new File(filePath);

                         //保存到服务器
                         item.write(storeFile);     
                     }
                }
                setParams(params);
            }
        } catch (FileUploadException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
            return null;
        }

后记

今天不想说什么了,有点累。

参考文章

http://blog.csdn.net/clementad/article/details/49717397
https://www.leiphone.com/news/201705/HeBxL297H3VU1nf2.html
http://www.ruanyifeng.com/blog/2012/08/file_upload.html

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery文件上传的步骤如下: 1. 定义UI结构,导入jQuery库,并创建文件选择框和上传按钮。 2. 验证是否选择了文件,通过给上传按钮添加点击事件监听器。在事件处理函数中,将jQuery对象转化为DOM对象,并获取选中的文件列表,然后判断是否选择了文件。如果没有选择文件,则弹出提示信息。 3. 向FormData中追加文件,使用FormData对象的append方法将选中的文件添加到FormData中。 4. 使用jQuery发起上传文件请求,通过$.ajax方法发起POST请求。指定请求的URL、FormData数据、以及设置contentType和processData参数为false,保持FormData的默认行为。成功回调函数中可以进行相应的处理。 5. 在文件上传过程中显示loading效果,可以使用ajaxStart函数监听Ajax请求开始时的事件,在回调函数中显示loading效果。 6. 注意,ajaxStart函数会监听当前文档内所有的Ajax请求,所以需要确保只在文件上传时显示loading效果。 综上所述,这是通过jQuery实现文件上传的一般步骤。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [jQuery实现文件上传](https://blog.csdn.net/weixin_52851967/article/details/128538988)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值