精华内容
下载资源
问答
  • html选择文件后立即上传,不用执行表单提交。输入款选择文件后立即执行上传操作,无需提交表单,html+jq 简单易用
  • 网上下载的swfupload控件, 实现了大文件,一次选择文件上传 我已经修改成,选择按钮,和上传按钮分开了 非常方便,还显示单文件进度条,总文件进度条和大小
  • json struts2 ajax文件上传 input type=file,选择相同文件也提交,里面附带类库,可以直接运行。使用工具, myeclipse
  • /*批量导入*/ /*#load:为按钮,点击生成一个隐藏的input file标签*/ $('#load').after('()">'); $('#load').click(function(){
        /*批量导入*/
        /*#load:为按钮,点击后生成一个隐藏的input file标签*/
        $('#load').after('<input type="file" id="load_xls" name="file" style="display:none" onchange ="uploadFile()">');
        $('#load').click(function(){
            document.getElementById("load_xls").click();
        });
        function uploadFile() {
            var myform = new FormData();
            myform.append('file',$('#load_xls')[0].files[0]);
            $.ajax({
                url: "admin.php?r=org/orguser/addusers",
                type: "POST",
                data: myform,
                contentType: false,
                processData: false,
                success: function (data) {
                    console.log(data);
                },
                error:function(data){
                    console.log(data)
                }
            });
        }
    
    展开全文
  • 使用ajax提交form表单实现文件上传

    千次阅读 2019-03-11 15:46:58
    在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控制页面的...使用ajax实现文件上传: --01:--导入文件上传的jar包: &lt;dependen...

    在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控制页面的跳转及数据传递,但是在某些时候不希望页面跳转,或者说想要将控制权放在前端,或者想在前台接收支持IOS或安卓的json数据格式,这时候就需要使用ajax提交。

    使用ajax实现文件上传:

    --01:--导入文件上传的jar包:

        <dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>1.3</version>
          </dependency>
          <dependency>
            <groupId>org.apache.commons</groupId>
            <artifactId>commons-lang3</artifactId>
            <version>3.3.2</version>
          </dependency>
          <dependency>
              <groupId>commons-io</groupId>
              <artifactId>commons-io</artifactId>
              <version>2.4</version>
          </dependency>

     --ajax提交form表单所以要返回json数据格式需要导入转换json的jar包

    <!--转换JSON-->
          <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
          <dependency>
              <groupId>com.fasterxml.jackson.core</groupId>
              <artifactId>jackson-databind</artifactId>
              <version>2.9.5</version>
          </dependency>

     --编写文件上传的jsp中的表单,使用form提交文件上传需要使用二进制的方式传输所以不要忘了在form标签中添加:enctype="multipart/form-data"

    <div style="align-items: center;align-content: center;">
        <h1>文件上传</h1>
        <form id="form" method="post" enctype="multipart/form-data">
            <p>请选择要上传的文件:</p>
            <input id="file" name="file" type="file" multiple="multiple"/>
            <br>
            <input id="upload" name="upload" type="button" value="上传">
        </form>
    </div>

    --编写提交文件上传的jq的ajax

    <script type="text/javascript">
        $(window).ready(function () {
           $("#upload").click(function () {
               var formData = new FormData($("#form")[0]);//获取表单中的文件
               alert(formData);
               $.ajax({
                   url:"upload",//后台的接口地址
                   type:"post",//post请求方式
                   data:formData,//参数
                   cache: false,
                   processData: false,
                   contentType: false,
                   success:function (data) {
                       alert(data.newFileName);
                   },error:function () {
                       alert("操作失败~");
                   }
    
               })
           });
        });
    
    
    </script>

      --在springmvc的配置文件中配置MultipartResolver用于文件上传

    <!-- 配置MultipartResolver,用于上传文件 -->
            <bean id = "multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
            <property name="defaultEncoding" value="utf-8"></property>
            </bean>

      --编写提交文件上传的jq的ajax

    @RequestMapping("/upload")
        @ResponseBody
        public Object upload(MultipartFile[] file, HttpSession session) {
            System.out.println(file);
            //获取服务器上传的文件路径
            String dir =  session.getServletContext().getRealPath("/upload");
            System.out.println(dir);
            Map<String,Object> map=new HashMap<>();
            for (MultipartFile files : file){
                System.out.println("文件类型:"+files.getContentType());
                //获取文件名
                String filename = files.getOriginalFilename();
                //获取文件的后缀名
                String suffix = filename.substring(filename.lastIndexOf(".") + 1);
                //给需要上传的文件起别并
                String newFileName=String.valueOf(System.currentTimeMillis())+"."+suffix;
                System.out.println("文件名:"+newFileName);
                System.out.println("文件后缀:"+suffix);
                System.out.println("文件大小:"+files.getSize()/1024+"KB");
                map.put("newFileName",newFileName);
                //创建要保存文件的路径
                File dirFile = new File(dir,filename);
                if (!dirFile.exists()){
                    dirFile.mkdirs();
                }
                try {
                    //将文件写入创建的路径
                    files.transferTo(dirFile);
                    System.out.println("文件保存成功~");
                } catch (IOException e) {
                    e.printStackTrace();
                }
    
    
            }
    
            return map;
    
        }

        注意

    • 在常用方式中,点击的登录按钮的type为"submit"类型;
    • 在常用方式中,form的action不为空;
    • ajax方式中需要注意的是$.ajax方法中的参数:dataType和data
    展开全文
  • 只需要添加一个label标签,定义类样式一个名称,还有给input添加style="display:none;",就成功了。 下面是代码: <label class="upFile"> <span class="upFile" style="text...上传图片</span> ...

    只需要添加一个label标签,定义类样式一个名称,还有给input添加style="display:none;",就成功了。

    下面是代码:

    <label class="upFile">
               <span class="upFile" style="text-align: center;float: left;">上传图片</span>
               <input class="upFile" type="file" name="upFile" style="display:none;">
    </label>

    展开全文
  • 一直有小伙伴不知道springboot项目...通过ajax提交form表单(含文件上传 ) 首先来看前端html,一个页面中同时实现了ajax方式提交表单(含附件)以及通过submit方式进行表单提交(带附件) <!DOCTYPE html> <...

    一直有小伙伴不知道springboot项目的文件上传功能,今天我们就来搞懂它,读完本篇文章你可以知道以下内容

    1. 单个文件上传
    2. 多个文件上传
    3. 文件与form表单普通属性同时提交
    4. 通过ajax提交form表单(含文件上传 )
    5. 文件下载(解决中文文件名乱码)

    首先来看前端html,一个页面中同时实现了ajax方式提交表单(含附件)以及通过submit方式进行表单提交(带附件)

    <!DOCTYPE html>
    <html lang="zh" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet" />
        <script src="/webjars/jquery/3.5.1/jquery.js"></script>
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
        <script type="text/javascript">
            var uploadFile = function () {
                var formdata = new FormData(document.getElementById("forms"));
                console.log(formdata);
                $.ajax({
                    url:"/upload",
                    type: "POST",
                    data: formdata,
                    processData:false,
                    contentType:false,
                    success:function(){
                        console.log("over...");
                    },
                    error: function (e) {
                        alert("错误")
                    }
                })
    
            }
    
        </script>
    </head>
    <body>
    
    <div class="container">
    
        <form class="form-signin" id="forms" th:action="@{/upload}" method="post" enctype="multipart/form-data">
            <h2 class="form-signin-heading">个人信息</h2>
            <input type="hidden" th:id="${person.id}" name="id" th:value="${person.id}"/>
            <div class="input-group">
                <span class="input-group-addon" id="basic-addon1">用户名</span>
                <input type="text" class="form-control" placeholder="用户名" id="userName" name="userName" th:value="${person.userName}" aria-describedby="basic-addon1">
            </div>
            <div class="input-group">
                <span class="input-group-addon" id="basic-addon2">&nbsp;&nbsp;&nbsp;</span>
                <input type="text" class="form-control" placeholder="age" id="age" name="age" th:value="${person.age}" aria-describedby="basic-addon1">
            </div>
            <div class="input-group">
                <span class="input-group-addon" id="basic-addon3">手机号</span>
                <input type="text" class="form-control" placeholder="mobile" id="mobile" name="mobile" th:value="${person.mobile}" aria-describedby="basic-addon1">
            </div>
            <div class="form-group">
                <label for="file">上传附件</label>
                <input type="file" id="file" name="file" >
                <p class="help-block">Example block-level help text here.</p>
            </div><div class="form-group">
                <label for="files">上传多附件</label>
                <input type="file" id="files" name="files" multiple>
                <p class="help-block">Example block-level help text here.</p>
            </div>
            <div class="btn-group" role="group">
                    <button type="button" class="btn btn-primary btn-default" id="upload" onclick="uploadFile()">ajax上传</button>
                    <button type="submit" class="btn btn-primary btn-default" id="" >submit上传</button>
            </div>
        </form>
    
    </div> <!-- /container -->
    </body>
    </html>
    

    后端代码:

    package com.myproject.springmybatis.controller;
    
    import com.myproject.springmybatis.model.Person;
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.ModelMap;
    import org.springframework.web.bind.annotation.*;
    import org.springframework.web.multipart.MultipartFile;
    
    import java.io.File;
    import java.io.IOException;
    import java.util.HashMap;
    import java.util.Map;
    
    @Controller
    public class FileUploadController {
    
        @GetMapping("/upload")
        public String toUpload(ModelMap map){
            Person person = new Person();
            person.setPassword("!23456");
            person.setAge(18);
            person.setId(1L);
            person.setUserName("zhangsan");
            map.put("person", person);
            return "fileUpload";
        }
    
        @PostMapping("/upload")
        @ResponseBody
        public Map<String,Object> upload(Person person, @RequestParam("file") MultipartFile file,@RequestParam("files") MultipartFile[] files) throws IOException {
            Map<String,Object> map = new HashMap<>();
            String filePath = "/Users/xumingfei/Desktop/test/";
            System.out.println(person);
            if (!file.isEmpty()) {
                String contentType = file.getContentType();
                String filename = file.getOriginalFilename();
    
                file.transferTo(new File(filePath+filename));
                map.put("msg","上传单个成功");
            }else {
                map.put("msg","上传失败");
            }
            for (MultipartFile f :
                    files) {
                String fname = f.getOriginalFilename();
                f.transferTo(new File(filePath+fname));
                System.out.println(f.getOriginalFilename());
    
            }
            map.put("msg1","上传多个附件成功");
            return map;
        }
        
        /**
         * 文件下载
         * @param request
         * @param response
         * @param fileName
         * @return
         * @throws IOException
         */
    	@RequestMapping("/downloadFile")
        @ResponseBody
        public String download(HttpServletRequest request, HttpServletResponse response, @RequestParam("fileName") String fileName) throws IOException {
       		if (StringUtils.isEmpty(fileName)) {
                fileName = "test附件.doc";
            }
            if (fileName != null) {
                File file = new File("/Users/xumingfei/Desktop/test/"+fileName);
                if (file.exists()){
                    String userAgent = request.getHeader("User-Agent");
                    if (userAgent.contains("MSIE") || userAgent.contains("Trident")) {
                        fileName = java.net.URLEncoder.encode(fileName, "UTF-8");
                    } else {
                        // 非IE浏览器的处理:
                        fileName = new String(fileName.getBytes("UTF-8"), "ISO-8859-1");
                    }
                    response.setContentType("application/force-download");
                    response.addHeader("Content-Disposition","attachment;fileName="+fileName);
                    byte[] buffer = new byte[1024];
                    FileInputStream inputStream = null;
                    BufferedInputStream bufferedInputStream = null;
                    try {
                        inputStream = new FileInputStream(file);
                        bufferedInputStream = new BufferedInputStream(inputStream);
                        OutputStream os = response.getOutputStream();
                        int i = bufferedInputStream.read(buffer);
                        while (i != -1) {
                            os.write(buffer, 0, i);
                            i = bufferedInputStream.read(buffer);
                        }
                        return "download success";
                    } catch (Exception e) {
                        e.printStackTrace();
                    }finally {
                        bufferedInputStream.close();
                        inputStream.close();
                    }
                }
            }
            return "failure";
        }
    }
    
    

    大家喜欢的话不妨给小编点个赞吧!扫一扫关注公众号不迷路。
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • input file 选择文件后自动执行上传

    千次阅读 2020-05-09 15:47:54
    input file 选择文件后自动执行上传 $('body').on('change','#upLoad',function(){ var formData = new FormData(); var name = $($(this)).val(); var files = $($(this))[0].files[0]; formData.append(...
  • 站在一个已实现功能的角度来重新看待这个文件上传的业务:编辑页面选择jar包,然后通过form表单提交,上传到后台程序,然后保存。 对于后端实现的更多细节,可以参考我的另一篇技术分享《Java实现用户头像上传》,...
  • 通过传统的form表单提交的方式上传文件 测试通过Rest接口上传文件 指定文件名: 上传文件: 关键字1: 关键字2: 关键字3: 不过传统的form表单提交会导致页面刷新,但是在有些情况下,我们不...
  • 这里是自己手写的,Util工具中的适合Excel2007,工具中会提到另外博客,博客里的技术适合所有版本的Excel。读者自己选择技术
  • 命令行执行svn ci的时候,如果是新增的文件,不会被提交。 作为一个懒人,是不能接受手动add这种操作的。 上命名 svn add ....svn ci -m "提交文件" ...然后再执行svn ci命令,即可将新增的文件提交到svn了。 ...
  • 提交导入文件"/> $('#import-submit').click(function () { var formData = new FormData(); var name = $("#importFile").val(); formData.append('file', $("#importFile")[0].files[0]); /...
  • RestTemplate文件上传模拟form表单提交

    千次阅读 2019-04-26 18:01:51
    但不同的是这次是上传文件,注意,这个跟一般的调用 content-type不一样哦 介绍一下我的项目背景: 前端是 fileinput插件 上传 后端是 springmvc接收 ,调用接口就用到了RestTemplate 此处时通过RestTemplate ...
  • java form表单提交文件上传

    千次阅读 2018-05-29 16:43:28
    //使用Apache文件上传组件处理文件上传步骤: //1、创建一个DiskFileItemFactory工厂 DiskFileItemFactory factory = new DiskFileItemFactory(); //2、创建一个文件上传解析器 ServletFileUpload upload ...
  • form表单提交数据的同时在表单中上传文件代码示例 ...我的代码示例最主要是讲如何在表单中获取文件数据,具体文件上传在哪里你们自己定,我这个示例中文件是上传在本地,文件存放的代码不全; &lt...
  • post提交,图片以文件流形式上传并保存到数据库,读取的时候再以文件流的形式读取并显示在前端页面
  • svn设置文件提交过滤

    万次阅读 2018-07-13 09:57:32
    在svn提交文件的时候为了避免一些不必要的文件提交到资源库,比如:.project或者.classpath其实这些文件都是本地开发工具所产生的文件,这些文件是不需要上传的,因为其他人不一定用这个开发工具,因此需要把这些...
  • 包含文件上传的form表单提交

    万次阅读 2018-07-18 08:55:14
    1.首先包含文件上传的表单要规定enctype="multipart/form-data" &lt;form id="menuUploadForm" class="layui-form" style="margin-top: 20px;margin-right: 20px" ...
  • 1.文件(图片/文档)上传就spring自带上传工具而言,只能用表单提交submit方式进行,不能使用ajax异步提交表单,因为异步提交之后input标签的内容就被springMVC解析成了字符串,无法获取文件名称和地址。页面如下: ...
  • jquery的ajax提交文件上传

    万次阅读 2018-12-05 22:23:35
    以前的项目大多的使用jquery的插件来进行文件上传,对于就只引用jquery而不使用插件来上传文件之前未有写过,最近项目里有写到和用到,就记录一下,以后方便查找。 提示:存在浏览器皆容问题,谨慎使用。 HTML代码...
  • 一、Git版本 本人电脑上的Git版本为2.19.2的版本。如图: 二、Git提交文件时,默认不提交文件的显示效果 ...自己电脑上的默认不提交的文件夹和文件的显示效果...需要一个纯文本文件文件名为.gitignore,没有...
  • input file选择文件后自动上传的代码

    千次阅读 2019-10-23 22:14:12
    html 中 file 类型的 input 输入框,可以将本地的文件上传到网站的服务器,但它的上传需要 form 表单提交触发的。而今天我们要说一说,file 类型的输入框在选择本地文件,自动上传的方法。 input file选择文件...
  • 实现文件上传,以及表单提交成功的回调函数
  • 选择文件后自动上传

    万次阅读 2017-05-02 12:06:37
    选择文件后,直接上传,主要利用input的onchange事件完成; html:   js: var imgArr =[];//存放上传文件的路径,用于本地生成预览,生成预览的代码读者自行完成; imgUld(ev){  let form = ...
  • SpringMVC提交数据的同时上传文件

    千次阅读 2017-06-11 14:37:57
    1. 要点 ...使用jquery-form的ajaxSubmit进行表单提交 使用SpringMVC进行处理...SpringMVC控制器中判断request是否包含文件,有文件则处理文件,没有文件则按原业务逻辑进行处理 2. 步骤2.1 html页面需要设置表单的enctype
  • 原生的input框中,当选择上传文件回显上传按钮上还是会显示未选择任何文件: 这个是无法解决的,想要去掉只能仿原生写: 点我上传文件 利用label代替input中的上传按钮,input隐藏即可,此时未选择任何文件不...
  • 解决WebUploader上传文件成功再次选择文件的问题 首先需要了解WebUploader的几个API 具体可以到官网上查询 https://fex.baidu.com/webuploader/doc/index.html removeFile removeFile( file ) ⇒ undefined...
  • FormData上传文件 FormData的基本用法 遍历FormData的常用方法 FormData上传文件存在的问题 FormData的基本用法 通常呢 我们创建Formdata对象有两种 官方文档是这么说的: 1.你可以自己创建一个...
  • 最近使用layui发现,在页面上传了图片可以用以下方式清除文件队列,在此做下笔记 let uploadInst = upload.render({ elem: '#test1' //绑定元素 ,url: 'up.php' //上传接口 ,accept: "images"//允许上传文件...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 315,293
精华内容 126,117
关键字:

文件上传选择文件后提交