精华内容
下载资源
问答
  • JAVA表单上传多个文件 java web form表单上传多个文件.zip
  • SpringMVC form表单 上传多个文件

    千次阅读 2017-05-12 15:11:35
    SpringMVC form表单 上传多个文件

    参考 http://www.cnblogs.com/dongying/p/4388464.html
    上传多张图片的后台

    <!--第一步:引入.js文件 ajaxSubmit需要jquery.form.js-->
    <script type="text/javascript"
        src="<%=basePath%>/resources/js/jquery.min.js"></script>
    <script type="text/javascript"
        src="<%=basePath%>/resources/js/jquery.validate.min.js"></script>
    <script type="text/javascript"
        src="<%=basePath%>/resources/js/jquery.form.js"></script>
        
     <!--第二步 新增表单区域开始:enctype="multipart/form-data" -->   
    <form id="createForm" method="post" action="" class="add-new-area">
    	<ul>
            <!--第三步 前台表单中的所有<input type="file" name="files"/>的name都应该是files -->   
    		<li class="piclis"><label></label><input type="file"
    			name="files" class="img-btn"></li>
    			
    		<li class="piclis"><label></label><input type="file"
    			name="files" class="img-btn"></li>
    		
    		<li class="piclis"><label></label><input type="file"
    			name="files" class="img-btn"></li>
    			
    		<!--第四步  提交表单 -->
    		<li><input type="submit" class="btn save-btn" value="保存">
    	    </li>
    	</ul>
    </form>
    
    <script>
    $("#createForm").validate({
    	//做表单验证
    			
    	//验证成功后提交参数
    	submitHandler : function(form) {
    		ajaxSubmit();
    	}
    });
    
    /*提交表单*/
    function ajaxSubmit() {
    	$("#createForm").ajaxSubmit({
    		type : 'post',
    		url : "weatherForecast/create", //变量
    		error : function() {//请求失败处理函数  
    			alert("失败");
    		},
    		success : function(data) { //请求成功后处理函数。
    			alert("成功");
    		}
    	});
    }
    </script>
    

    前台表单中的所有的name都应该是files,否则参数里的files无法获取到所有上传的文件

    import java.io.IOException;
    import java.util.List;
    
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpSession;
    
    import org.springframework.web.multipart.MultipartFile;
    import org.springframework.web.multipart.MultipartHttpServletRequest;
    
    import org.springframework.web.bind.annotation.ResponseBody;
    import org.apache.shiro.authz.annotation.RequiresPermissions;
    import org.springframework.web.bind.annotation.RequestMapping;
    
    @ResponseBody
    @RequiresPermissions("weatherForecast:create")
    @RequestMapping("/weatherForecast/create")		
    public AjaxResponseMsg createWeatherForecast(WeatherForecast weatherForecast, HttpServletRequest request,
    		HttpSession session) throws IOException {
    		
        /*1.用HttpServletRequest接收前台的参数*/
    	List<MultipartFile> files = null;
    	
    	/* 2.如果是上传文件请求,获取文件列表*/
    	if (request instanceof MultipartHttpServletRequest) { 
    		files = ((MultipartHttpServletRequest) request).getFiles("files"); 
    	}
    	String basePath = session.getServletContext().getRealPath("/");// 项目路径
        
       	/* 3.如果文件列表不为空,循环文件列表,保存文件 */
    	if (files != null) {
    		for (MultipartFile file : files) {
    			/* 3.1保存图片 */
    			String picUrl = HandleFile.saveFile(file, basePath);
    			/* 3.2 其他后续操作 */
    			
    		} /*end for()*/
    	} /*end if*/
    
    
    }
    

    如果是上传多张图片
    1.使用 HttpServletRequest接收前台的参数
    2.判断 这次请求是不是 上传文件请求,如果是,用request 获取文件列表
    这样,即使前台没有上传文件,也不会出错

    如果直接用MultipartFile[] 数组接收参数,可能会报错
    org.springframework.web.multipart.MultipartException: The current request is not a multipart request

    保存文件的方法HandleFile.saveFile()
    http://blog.csdn.net/dreamstar613/article/details/53841438

    展开全文
  • 因为在框架中上传文件时不适合直接用form提交,因为这样会刷新页面。我们一般会用ajax进行异步上传。此方法可上传多种类型文件。 html代码: 注意如果要多选文件需要在input上增加属性 multiple="multiple"...

        因为在框架中上传文件时不适合直接用form提交,因为这样会刷新页面。我们一般会用ajax进行异步上传。此方法可上传多种类型文件。

        html代码:

        注意如果要多选文件需要在input上增加属性 multiple="multiple"

    <form action="uploadTrainProduct" method="post" enctype="multipart/form-data" id="form1">
        <div class="modal fade" id="trainInfoModal" tabindex="-1" role="dialog" aria-labelledby="orderInfoModalLabel"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            ×
                        </button>
                        <h4 class="modal-title" id="orderInfoModalLabel1">
                            培训产品上传
                        </h4>
                    </div>
                    <div class="modal-body">
                        <div class="row" style="margin-top: 10px">
    
                            <div class="col-sm-5 " style="text-align:center;">
    
                                <label for="file"class="btn btn-default">上传培训产品</label>
    
                                <input id="file"type="file"style="display:none" class="form-control" name="file" multiple="multiple">
                                <!--注意点:要多选文件要用multiple="multiple"-->
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                        </button>
                        <button type="button" class="btn btn-primary" onclick="uploadTrainProduct()">
                            确定
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </form>

        js:

    function uploadTrainProduct(){
        var formData = new FormData($("#form1")[0]);  //重点:要用这种方法接收表单的参数
        $.ajax({
            url : "/it/orderManage/uploadTrainProduct",
            type : 'POST',
            data : formData,
            // 告诉jQuery不要去处理发送的数据
            processData : false,                 
            // 告诉jQuery不要去设置Content-Type请求头
            contentType : false,
            async : false,
            success : function(data) {
                if(data){
                }
            }
        });
    }

        java代码:

    @RequestMapping(value = "/uploadTrainProduct", method = RequestMethod.POST, produces = "text/html;charset=utf-8")
        @ResponseBody
        public String uploadTrainProduct(
                @RequestParam(value = "file") MultipartFile[] files,  //这样接收文件
                @RequestParam(value = "id") String id,            //接收其他参数
                @RequestParam(value = "content") String content,
                HttpServletRequest request
        ) {
            try {
                for (MultipartFile file : files) {    //循环保存文件
                    uploadFile(file, request);
                }
                // 返回前台
                return "success";
    
            } catch (Exception e) {
                e.printStackTrace();
                return "fail";
            }
    
        }
    
        public String uploadFile(MultipartFile file, HttpServletRequest request) throws IOException {
            String fileName = file.getOriginalFilename();
            String path="d:/images/m2";            //设置文件保存路径
    //        File tempFile = new File(path, new Date().getTime() + String.valueOf(fileName));
            File tempFile = new File(path, String.valueOf(fileName));
            if (!tempFile.getParentFile().exists()) {    //创建文件夹
                tempFile.getParentFile().mkdir();
            }
            if (!tempFile.exists()) {
                tempFile.createNewFile();
            }
            file.transferTo(tempFile);
            return "images/" + tempFile.getName();
        }

    可以试试,非常好用

    展开全文
  • el-upload组件默认情况下上传多少个文件就会请求多少次上传接口 实现请求一次接口同时上传多个文件表单 实现方案 multiple 支持多选文件 :auto-upload="false" 不在选取文件后立即进行上传 :...

    目的

    el-upload组件默认情况下上传多少个文件就会请求多少次上传接口 实现请求一次接口同时上传多个文件及表单

    实现方案

    multiple 支持多选文件
    :auto-upload="false" 不在选取文件后立即进行上传
    :http-request="httpRequest" 覆盖默认的上传行为 自定义上传的实现
    this.$refs.upload.submit()

    代码实现

    <template>
        <div id="text">
        <el-form ref="form" :model="newData" label-width="80px" label-position="right" size="mini">
            <el-form-item label="上传文件" prop="name">
                <el-upload
                    ref="upload"
                    multiple
                    name="File"
                    action=""
                    :auto-upload="false"
                    accept=".dll, .DLL, .xml, .XML"
                    :http-request="httpRequest"
                    >
                    <el-button size="small" type="primary">点击上传</el-button>
                    <span slot="tip" class="el-upload__tip">&nbsp;&nbsp;&nbsp;只能上传dll/xml文件</span>
                </el-upload>
            </el-form-item>
            <el-form-item label="作者名称" prop="authorName">
                <el-input v-model="newData.authorName"></el-input>
            </el-form-item>
            <el-form-item label="作者单位" prop="authorFirm" >
                <el-input v-model="newData.authorFirm"></el-input>
            </el-form-item>
            <el-form-item label="模型类别" prop="number">
                <el-input v-model="newData.number"></el-input>
            </el-form-item>
            <el-form-item label="模型版本" prop="versions">
                <el-input v-model="newData.versions"></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="remark"  label-width="80px">
                <el-input v-model="newData.remark" type="textarea"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="newForm" size="mini">确 定</el-button>
            <el-button @click="editDialog = false" size="mini">取 消</el-button>
        </div>    
      </div>
    </template>
    <script>
    import request from "@/Utils/request";
    
    export default {
      data () {
        return {
          newData:{},
          file:[]    
        }
      },
      methods:{
        httpRequest(param) {
            this.file.push(param.file);// 一般情况下是在这里创建FormData对象,但我们需要上传多个文件,为避免发送多次请求,因此在这里只进行文件的获取,param可以拿到文件上传的所有信息
        },
        // 提交
        newForm(){
            var upData = new FormData();
            this.$refs.upload.submit();// 这里是执行文件上传的函数,其实也就是获取我们要上传的文件   
            this.file.forEach(function (file) {// 因为要上传多个文件,所以需要遍历
                upData.append('file', file, file.name); 
                // upData.append('file', this.file); //不要直接使用我们的文件数组进行上传,你会发现传给后台的是两个Object
            })
            upData.append("body", JSON.stringify(this.newData)) // 这里需要转换一下格式传给后台
            request
            .post('http://202.41.241.221:9095/uploader/uploadFile',upData)
            .then(function(response) {
            if (response.data.code == 200) {
            }
            })
            .catch(function(error) {
                console.log(error);
            });
        } 
      }
    }
    </script>
    <style scoped>
    #text{
      background: #fff;
      margin: 20px;
      padding: 20px
    }
    </style>
    

    效果展示

    在这里插入图片描述在这里插入图片描述在这里插入图片描述

    将表单内容以formdata形式传参

    newForm(){
        var vm=this; 
        var upData = new FormData();
        this.$refs.upload.submit(); 
        this.file.forEach(function (file) {
            upData.append('file', file, file.name); 
        })
        Object.keys(vm.newData).forEach(function(key){
          upData.append(key, vm.newData[key]); 
          console.log(key,vm.newData[key])
        });
        request
        .post('http://202.41.241.221:9095/uploader/uploadFile',upData)
        .then(function(response) {
        if (response.data.code == 200) {
        }
        })
        .catch(function(error) {
            console.log(error);
        });
    } 
    

    效果展示

    在这里插入图片描述

    展开全文
  • 表单多文件选择

    千次阅读 2009-02-02 13:04:00
    问题的引入: 在上传文件表单制作过程中... 这样的话,我们就要做好多个file标签,用户体验也不好; 问题的解决:在flash做的表单中,文件是可以多选的 所以,我们可以在表单中插入一个FLASH来实现文件的多选。

    问题的引入:

      在上传文件的表单制作过程中我们会遇到这样的问题:

       在firefox和msie里的api是不能实现上传文件的多选的.

     

       这样的话,我们就要做好多个file标签,用户体验也不好;

     

    问题的解决:

    在flash做的表单中,文件是可以多选的

     所以,我们可以在表单中插入一个FLASH来实现文件的多选。

    展开全文
  • 参考资料 https://www.cnblogs.com/Springmoon-venn/p/5536854.html 这个是能同时选择多个文件,也能多次选择一个文件上传 现在问题是 1、一刷新页面,之前选择的文件都清空了 2、删除按钮的操作还不知道
  • elementUI+vue表单上传多个文件和其他表单数据一起提交 这里使用的formdata提交方式,this.$refs.upload.submit()提交会触发http-request自定义上传方法 element代码 <el-dialog title="文件上传" :visible....
  • 多个文件上传 文件与form表单普通属性同时提交 通过ajax提交form表单(含文件上传 ) 首先来看前端html,一个页面中同时实现了ajax方式提交表单(含附件)以及通过submit方式进行表单提交(带附件) <!DOCTYPE ...
  • 对webuploader进行二次封装,实现一个表单中,多个字段需要上传文件并且需要上传多个文件
  • 在一个form表单里同时上传多个文件和文本信息的解决方案
  • FormData上传多文件 FormData的基本用法 遍历FormData的常用方法 FormData上传多文件存在的问题 FormData的基本用法 通常呢 我们创建Formdata对象有两种 官方文档是这么说的: 1.你可以自己创建一...
  • 假若我某项共需要上传13个文件,则会得到如下信息: 第一个: 第二个: 第13个: 所以通过以下代码可以遍历存储。 java代码: public void saveByEach() { List upl
  • 当一个html文件中存在多个上传控件,例如:既要上传文件,又要上传图片,此时怎么使用layui.upload ? 解决办法:修改layui.upload中field参数,如下:(具体见js部分图片上传代码中) html页面元素 <div ...
  • Element多个表单验证

    千次阅读 2018-05-07 09:54:34
    最近刚开始接触饿了吗组件,各种还是挺好用的,不过也有一些使用在文档是没有说全的,网上也比较少案例,以下是一个多表单验证的Demo。 需求如下图:点击提交时候要对n个表单进行验证。
  • 我们手里面有很多个相同结构的Excel表格,项目经理说这样看起来很不直观,你帮我...一、将多个Excel文件通过多表单sheet的形式合并到同一个Excel文件中去,实现如下:   def trans2Excel(data='Results/',save...
  • form表单中提交多个实体对象

    千次阅读 2019-09-23 09:51:27
    1、添加相应实体对象 ...2、动态追加多个实体 from <!-- 第一个资料 --> <div class="control-group" id="download"> <label class="control-label">资料名称:</label> <...
  • form表单提交时多个相同name属性

    千次阅读 2020-05-06 15:53:48
    form表单提交时多个相同name属性form表单提交时多个相同name属性
  • form表单设置多个action

    千次阅读 2017-11-08 18:28:06
    Untitled Document function act1() { document.testForm.action="a.... //testForm为form表单的name document.testForm.submit(); } function act2() { document.testForm.action="b.jsp"; document.testFor
  • 在使用file表单时想知道选择文件的路径、名字、大小、类型? 二、知识点 1.input表单会触发change事件 2.获取路径 触发这事件的对象调用val()函数 3.文件名 触发事件后会有一事件对象e.currentTarget....
  • 今天遇到的当前页面是已经带了参数了,比如:www.xxx.com/index.php?id=1,按照action留空的方法来提交,就不能提交到这带参数的url了,也不能到把表单中的直拼接在uri后面。那怎么办呢,可以用js的方法拼接好在...
  • form表单多文件上传

    千次阅读 2016-12-29 11:01:17
    例如,实名认证时上传身份证正反面图片,这时就会用到form表单多文件上传。本文提供两种方式:form表单直接提交和ajax提交 实现 form表单直接提交 < form enctype = "multipart/form-data" ...
  • 本篇讲述使用ElementUI中的Upload组件的http-request方法进行多个文件上传的同时提交表单数据 上篇博客使用的是Upload携带额外参数的方法进行文件上传的同时提交表单数据,那种方法仅适用于单个文件上传的时候携带...
  • elementUI表单携带多文件一次性上传

    千次阅读 2019-08-26 10:01:54
    由于elementUI的图片上传控件默认是单图片上传的,如果你添加了多张图片它会分多次请求发送给服务器,项目中多数是需要一次性上传多个图片文件且携带表单内容,这里记录一下实现功能的过程 代码: <el-form :ref=...
  • Android 多文件上传,表单上传

    热门讨论 2014-11-27 15:49:44
    Android 多文件上传,表单上传,上传进度显示
  • spring mvc 在进行多文件上传的时候,在后台接收上传的文件时,使用数组的形式如MultipartFile[] files,会出现一些问题,比如页面中的一form表单,没有选择要上传的文件,就要提交,这样后台的action/controller...
  • form表单多文件上传

    千次阅读 2017-05-10 08:56:36
    form表单多文件上传formData对象可以使用一系列的键值对来模拟一完整的表单,然后使用Ajax来发送这个表单使用表单初始化FormData对象的方式上传文件 <!--文件上传--> ;
  • input标签file类型,选择多个文件进行上传
  • Javaweb实现表单数据和多文件上传

    千次阅读 2018-04-20 20:01:55
    Javaweb实现表单数据和多文件上传 Javaweb实现表单数据和多文件上传 前期准备 项目目录 项目文件 项目的依赖包 上传界面截图 上传成功的截图 项目下载链接 前期准备 form-data: 就是http请求中的...
  • pandas读取和写入excel多个sheet表单

    千次阅读 2020-06-11 17:47:11
    一、读取多个表单 import pandas as pd excel_reader=pd.ExcelFile('文件.xlsx') # 指定文件 sheet_names = excel_reader.sheet_names # 读取文件的所有表单名,得到列表 df_data = excel_reader.parse(sheet_...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 387,505
精华内容 155,002
关键字:

表单选择多个文件