按钮不通过表单使用 ajax上传文件

小灰灰 2022-02-14 03:46 229阅读 0赞

近期在做一个文件上传xia下载功能,因为不适合使用通过表单方式提交后台,只是通过如下方式按钮上传文件到后台并且需要传参数

主要是可以不通过提交表单,而是通过按钮触发ajax把文件内容和参数传递到后台

当然大部分情况下我们都是可以通过form表单形式提交到后台,这个当然要简单多了,

主要我这个情景不适合使用form表单形式,特写出来做一记录

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoYW80MzA_size_16_color_FFFFFF_t_70][]

功能大概就是如上点击按钮上传文件

直接上代码

JSP代码

<th> 							
    	<input id="file" name="file" type="file" style="width:300px;height: 25px">
    	<input id="btnSubmit" class="btn btn-primary" type="button" value="浏览"  onclick="uploadFile('${loanCollection.loanId}')"/> 
    	<input id="btnSubmit" class="btn btn-primary" type="button" value="下载"  onclick="upload(4,'${loanCollection.loanId}')" /> 
    			   </th>

JS代码

function uploadFile(loanId) {
                var myform = new FormData();
                myform.append('file', $("#file")[0].files[0]);
                myform.append('loanId',loanId);
                $.ajax({
                    url: ctx+"/loanafter/loancollection/insuranceCompensatory/upload",
                    type: "POST",
                    data: myform,
                    async: false,
                    contentType: false,
                    processData: false,
                    success: function (result) {
                        if (result && result.result) {
                            getFileListPage();
                        } else {
                            $.messager.alert("警告", "文件上传失败！", "warning", function () {
                                var file = document.getElementById('file');
                                file.value = '';
                            });
                        }
                    },
                    error: function (data) {
                        $.messager.alert("警告", "文件上传失败！", "warning", function () {
                            var file = document.getElementById('file');
                            file.value = '';
                        });
                    }
                });
            }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoYW80MzA_size_16_color_FFFFFF_t_70]: /images/20220214/0697078e8cfd42078652637985181b37.png

发表评论取消回复

表情：

评论列表（有 0 条评论，229人围观）

还没有评论，来说两句吧...

相关阅读

相关 jquery Ajax提交表单（使用jquery Ajax上传附件）

用过jquery的Ajax的人肯定都知道，Ajax的默认编码方式是”application/x-www-form-urlencoded“，此编码方式只能编码文本类型

叁歲伎倆/ 2022年07月26日 05:05/ 0 赞/ 403 阅读

相关使用ajax提交form表单，包括ajax文件上传

[使用ajax提交form表单，包括ajax文件上传][ajax_form_ajax] http://www.cnblogs.com/zhuxiaojie/p/47839

快来打我*/ 2022年07月24日 12:15/ 0 赞/ 258 阅读

相关 Ajax表单提交上传文件

Ajax表单提交上传文件： html 部分： <form id="uploadForm" enctype="multipart/form-data">

约定不等于承诺〃/ 2022年07月18日 05:15/ 0 赞/ 235 阅读

相关通过jQuery Ajax使用FormData对象上传文件

但上传文件部分只有底层的`XMLHttpRequest`对象发送上传请求，那么怎么通过`jQuery`的`Ajax`上传呢？本文将介绍通过`jQuery`使用`FormD

蔚落/ 2022年07月16日 09:40/ 0 赞/ 247 阅读

相关 ajax异步上传文件(无需表单)

今天给大家带来的是ajax上传文件，不需要表单，不需要把表单设置二级制数据传输格式，简单粗暴，看了之后的都会了。废话不多说，下面看代码把，最下面给大家哦提供一个示

柔光的暖阳◎/ 2022年06月10日 12:50/ 0 赞/ 403 阅读

相关 JQuery ajax 单按钮异步上传

1.导入ajaxfileupload.js 前往https://download.csdn.net/download/duguxingfeng/10277768

Bertha 。/ 2022年05月29日 20:18/ 0 赞/ 170 阅读

相关通过Ajax方式上传文件，使用FormData进行Ajax请求

转载自：[http://yunzhu.iteye.com/blog/2177923][http_yunzhu.iteye.com_blog_2177923] 通过

曾经终败给现在/ 2022年05月17日 07:59/ 0 赞/ 237 阅读

相关 ajax 单文件多文件上传

使用 ajax 上传文件，页面不刷新本文后台使用 springboot 框架后台上传接口 package com.che.pri.controlle

梦里梦外;/ 2022年03月17日 19:28/ 0 赞/ 305 阅读

相关按钮不通过表单使用 ajax上传文件

近期在做一个文件上传xia下载功能,因为不适合使用通过表单方式提交后台,只是通过如下方式按钮上传文件到后台并且需要传参数主要是可以不通过提交表单,而是通过按钮触发ajax把

小灰灰/ 2022年02月14日 03:46/ 0 赞/ 230 阅读

相关文件的上传（表单上传和ajax文件异步上传）

一.表单上传： html客户端部分： <form action="upload.ashx" method="post" enctype="multipart/f

亦凉/ 2021年06月26日 16:06/ 0 赞/ 646 阅读