• 动态input file多文件上传到后台没反应的解决方法!!!


    其实我也不太清除具体是什么原因,但是后面就可以了!!!

    我用的是springMVC 自带的文件上传

    1、首先肯定是要有springMVC上传文件的相关配置!

    2、前端

      这是动态input file上传到后台没反应的写法(页面上写死的上传到后台是可以的)

      这段代码是写在table>>下的form表单里的

      <input type="button" name="button" value="添加附件" onclick="addInput()">
    <input type="button" name="button" value="删除附件" onclick="deleteInput()">
    <span id="upload"></span>
    改为
    吧上面那段代码换种方式,先写<form>,在写<table>

    <div class="modal-content" style=" 600px">
    <form action="/ecp/mulFileUpload/testFu" method="POST" enctype="multipart/form-data">
    <input type="hidden" name="topicId" value="${topicId}">
    <table class="table table-bordered">
    <tr>
    <th>活动参与人数:</th>
    <td><input type="text" name="peopleCount"/></td>
    </tr>
    <tr>
    <th>活动人均经费:</th>
    <td><input type="text" name="perPrice"/></td>
    </tr>
    <tr>
    <th>上传图片/附件:</th>
    <td>
    <input type="file" name="myfiles"/>
    <span id="upload"></span>
    </td>
    </tr>
    <tr>
    <td>
    <input type="button" name="button" value="添加图片/附件" onclick="addInput()">
    <input type="button" name="button" value="删除图片/附件" onclick="deleteInput()">
    </td>
    <%--<td><button class="btn btn-success" onclick="formSubmit()"></button></td>--%>
    <td><input type="submit" class="btn btn-success"/></td>
    </tr>

    </table>
    </form>
    </div>

    这样就可以了,说实话我也不知道为什么(!!!!)

    3、js代码


    var attachName = "myfiles";

    function addInput(){
    createInput(attachName);

    $("#fileId").append("<div><input style="display:inline;" type="file" name='myfiles'><button onclick="deleteInput(this)">移除</button></div>");

    }

    function deleteInput(obj){
    removeInput();

    obj.parentNode.remove();


    }

    function createInput(name){
    var aElement=document.createElement("input");
    aElement.name=name;
    aElement.type="file";

    var spanElement = document.getElementById("upload");
    /* if(document.getElementById("upload").insertBefore(aElement,spanElement.nextSibling) == null){
    return false;
    }*/
    if(document.getElementById("upload").appendChild(aElement) == null){
    return false;
    }
    return true;
    }

    function removeInput(){
    var aElement = document.getElementById("upload");
    if(aElement.removeChild(aElement.lastChild) == null){
    return false;
    }

    return true;
    }

     4、Java代码

    package com.ibm.db.controller;

    import com.ibm.db.service.IMulFileUploadService;
    import com.ibm.db.service.ITopicService;
    import org.apache.commons.io.FileUtils;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestParam;
    import org.springframework.web.bind.annotation.ResponseBody;
    import org.springframework.web.bind.annotation.RestController;
    import org.springframework.web.multipart.MultipartFile;

    import javax.annotation.Resource;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.File;
    import java.io.IOException;
    import java.text.DateFormat;
    import java.text.SimpleDateFormat;
    import java.util.Date;

    /**
    * Created by zml on 16-4-11.
    */
    @RestController
    @RequestMapping(value = "/ecp/mulFileUpload")
    public class mulFileLoadifyController {

    @Resource(name = IMulFileUploadService.SERVICE_NAME)
    private IMulFileUploadService topicService;

    @RequestMapping(value = "/testFu")
    public String addUser( @RequestParam MultipartFile[] myfiles, HttpServletRequest request) throws IOException {

    Date dataTime = new Date();
    //保存该活动贴的相关信息,材料提交状态改为1
    topicService.insertIno(topicId,1,peopleCount,perPrice,dataTime);

    //如果只是上传一个文件,则只需要MultipartFile类型接收文件即可,而且无需显式指定@RequestParam注解
    //如果想上传多个文件,那么这里就要用MultipartFile[]类型来接收文件,并且还要指定@RequestParam注解
    //并且上传多个文件时,前台表单中的所有<input type="file"/>的name都应该是myfiles,否则参数里的myfiles无法获取到所有上传的文件
    //判断file数组不能为空并且长度大于0
    if(myfiles!=null&&myfiles.length>0){

    //循环获取file数组中得文件
    for(int i =0;i<myfiles.length;i++){
    MultipartFile file = myfiles[i];
    String uploadContentType =file.getContentType();
    String expandedName ="";
    if (uploadContentType.equals("imagepeg")
    || uploadContentType.equals("image/jpeg")) {
    // IE6上传jpg图片的headimageContentType是imagepeg,而IE9以及火狐上传的jpg图片是image/jpeg
    expandedName = ".jpg";
    } else if (uploadContentType.equals("image/png")
    || uploadContentType.equals("image/x-png")) {
    // IE6上传的png图片的headimageContentType是"image/x-png"
    expandedName = ".png";
    } else if (uploadContentType.equals("image/gif")) {
    expandedName = ".gif";
    } else if (uploadContentType.equals("image/bmp")) {
    expandedName = ".bmp";
    }

    //保存文件
    saveFile(file,expandedName,request);
    }
    }
    return "uploadSuccess";
    //return "redirect:/list.html";
    }

    /***
    * 保存文件
    * @param file
    * @return
    */
    private boolean saveFile(MultipartFile file,String expandedName,HttpServletRequest request) {
    DateFormat df = new SimpleDateFormat(TopicController.DEFAULT_SUB_FOLDER_FORMAT_AUTO);
    String fileName = df.format(new Date());
    // 判断文件是否为空
    if (!file.isEmpty()) {
    try {
    String filePath = "";
    // 文件保存路径
    if(expandedName!=null&&!expandedName.equals("")){
    //如果是图片
    filePath = request.getSession().getServletContext().getRealPath("/") + "upload/img/"
    + fileName+expandedName;
    }else{
    String OriginalFilename = file.getOriginalFilename();
    String suffix=OriginalFilename.substring(OriginalFilename.lastIndexOf(".")+1);
    filePath = request.getSession().getServletContext().getRealPath("/") + "upload/file/"
    + fileName+"."+suffix;
    }


    File targetFile = new File(filePath);
    if (!targetFile.exists()) {
    targetFile.mkdirs();
    }

    // 转存文件
    file.transferTo(targetFile);
    return true;
    } catch (Exception e) {
    e.printStackTrace();
    }
    }
    return false;
    }
    }

     
  • 相关阅读:
    VUE网页loading加载状态
    VUE使用canvas画板实现签字
    一个完整的项目管理流程
    APP原型的设计步骤是什么?
    如何对接网建SMS短信通短信验证码接口
    如何彻底红蜘蛛,非常方便!!!
    如何在cmd中连接数据库
    mvn deploy:deploy-file命令
    Java线程池的分析和使用
    jstat命令详解
  • 原文地址:https://www.cnblogs.com/zml-java/p/5384521.html
Copyright © 2020-2023  润新知