ajax上传文件

最新推荐文章于 2024-07-15 15:38:12 发布

魔道不误砍柴功

最新推荐文章于 2024-07-15 15:38:12 发布

阅读量1.5k

点赞数

分类专栏： # Ajax 文章标签： ajax上传文件

本文链接：https://blog.csdn.net/qq_35971258/article/details/79889628

版权

Ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

问题：由于普通的表单提交给用户带来的体验效果太差，所以绝对使用ajax进行表单的提交，用户体验效果好一点!网上找了一下，发现这个方法还是提好用的!下面就是使用ajax提交表单源码

1：注意下面的intput的name必须和后台的接收参数变量一样，否则接收不到值!

<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
   <meta charset="utf-8" />
   <title></title>

   <script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
   <link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
   <link rel="stylesheet" href="css/index.css" />

</head>
<body>

<form class="layui-form layout-form"  enctype="multipart/form-data" action="" id="uploadForm">
   <div class="layui-form-item">
      <label class="layui-form-label">论文类别</label>
      <div class="layui-input-block">
         <select name="cate_id" lay-verify="required">
            <option value="" >-请选择-</option>
            <option value="1" >子宫内膜异位症</option>
            <option value="2">多囊卵巢综合征</option>
            <option value="3" >围绝经期综合征</option>
            <option value="4">妇科肿瘤</option>
            <option value="5">不孕不育</option>
            <option value="6">炎症性疾病</option>
            <option value="7">产科相关疾病</option>
            <option value="8">其他</option>
         </select>
      </div>
   </div>
   <div class="layui-form-item">
      <label class="layui-form-label">论文类型</label>
      <div class="layui-input-block">
         <select name="type_id" lay-verify="required">
            <option value="" >-请选择-</option>
            <option value="1">论著</option>
            <option value="2">综述</option>
         </select>
      </div>
   </div>
   <div class="layui-form-item">
      <label class="layui-form-label">题目</label>
      <div class="layui-input-block">
         <input type="text" name="file_name" required  lay-verify="required" placeholder="请输入题目" autocomplete="off" class="layui-input">
      </div>
   </div>
   <div class="layui-form-item">
      <label class="layui-form-label">作者单位</label>
      <div class="layui-input-block">
         <input type="text" name="author_place" required  lay-verify="required" placeholder="请输入作者单位" autocomplete="off" class="layui-input">
      </div>
   </div>
   <div class="layui-form-item">
      <label class="layui-form-label">第一作者</label>
      <div class="layui-input-block">
         <input type="text" name="first_author" required  lay-verify="required" placeholder="请输入第一作者" autocomplete="off" class="layui-input">
      </div>
   </div>
   <div class="layui-form-item">
      <label class="layui-form-label">通讯作者</label>
      <div class="layui-input-block">
         <input type="text" name="touch_author" required  lay-verify="required" placeholder="请输入通讯作者" autocomplete="off" class="layui-input">
      </div>
   </div>
   <div class="layui-form-item">
      <label class="layui-form-label">投稿人手机</label>
      <div class="layui-input-block">
         <input type="text" name="publisher_phone" required  lay-verify="required" placeholder="请输入投稿人手机" autocomplete="off" class="layui-input">
      </div>
   </div>
   <div class="layui-form-item">
      <label class="layui-form-label">投稿人邮箱</label>
      <div class="layui-input-block">
         <input type="text" name="publisher_email" required  lay-verify="required" placeholder="请输入投稿人邮箱" autocomplete="off" class="layui-input">
      </div>
   </div>

   <div class="layui-form-item">
      <label class="layui-form-label">投稿人</label>

      <div class="layui-input-block div">
         <span class="span">选择文件</span>
         <input type="file" name="file" required  lay-verify="required"  id="file" />
         <span class="span2"></span>
      </div>
   </div>

   <div class="layui-form-item">
      <div class="layui-input-block">
         <button class="layui-btn" lay-submit lay-filter="formDemo" id="btnn">立即提交</button>
         <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
   </div>
</form>
<script type="text/javascript" src="layui/layui.js" ></script>
<script>
   function validateTopic(){     
         if($('[name=file]').val()!==""){
            
            $('[name=file]').next().html($('[name=file]').val());
         }
      
   
   }
$('[name=file]').click(function(){
   validateTopic();
})
   
   
   
   
   
layui.use('form', function(){
  var form = layui.form;
  
  //监听提交
  form.on('submit(formDemo)', function(data){
    //layer.msg(JSON.stringify(data.field));
    
    //注意这里是讲整个formData封装成一个二进制文件字节流了,而不是一个单独的input file文件框
    var formData = new FormData($('#uploadForm')[0]);
    //alert("formData="+formData);
   
    $.ajax({
        async: false,//要求同步 不是不需看你的需求
        type: 'post',
        url: "http://localhost:8080/file/uploadFiles",
        data: formData,
        cache: false,
        processData: false,
        contentType: false,
        success:function(data){
            //alert("resultCallbck="+data+"投稿成功");
            //layer.alert('投稿成功');
         //重定向到成功页面
         location.href="./succeed.html";
        },
        error:function(){
            alert("上传失败");
        }
    });
    
    return false;
  });
});

    $(function () {
//      $("#btnn").click(function () {
//          var formData = new FormData($('#uploadForm')[0]);
//          alert("formData="+formData);
//       
//          $.ajax({
//              async: false,//要求同步 不是不需看你的需求
//              type: 'post',
//              url: "http://39.108.144.122:8080/file/uploadFiles",
//              data: formData,
//              cache: false,
//              processData: false,
//              contentType: false,
//              success:function(data){
//                  alert("resultCallbck="+data+"投稿成功");
//             //重定向到成功页面
//             location.href="./succeed.html";
//              },
//              error:function(){
//                  alert("上传失败");
//              }
//          });
//      });
    });

</script>


</body>
<script type="text/javascript" src="js/index.js" ></script>
<script src="js/jquery.form.js" ></script>
</html>

2：后台的文件上传操作!

/**
 * 获取所有的投稿类别和投稿类型
 * @return
 */
@RequestMapping(value = "/uploadFiles",method = RequestMethod.POST)
//上传文件
public String upload(@RequestParam(value = "file", required = false)MultipartFile file,
                     String file_name,
                     String author_place,String touch_author,
                     String publisher_phone,String first_author,
                     String cate_id,String publisher_email,
                     String type_id,
                     HttpServletRequest request) {
    logger.info("file====="+file+";"+file.getOriginalFilename()+"file_name"+file_name+request.getRemoteHost()+":"+request.getRemoteAddr());

    if(file.getSize()>1024*1000*20){
        return "fileTooLong";
    }

    //上传文件路径
    //获取跟目录
    File fpath = null;
    File filepath = null;
    try{
        //获取
        //如果文件不为空，写入上传路径
        if(!file.isEmpty()) {
            fpath = new File(ResourceUtils.getURL("classpath:").getPath());
            if(!fpath.exists()){
                fpath = new File("");
            }
            //如果上传目录为/static/upload/，则可以如下获取：
            File upload = new File(fpath.getAbsolutePath(),"static/upload/");
            if(!upload.exists()){
                upload.mkdirs();
            }
            //上传文件名
            String filename = file.getOriginalFilename();
            // D:\aaa\bb\c.txt
            String realFileName=filename.substring(filename.lastIndexOf("\\")+1,filename.length());

            //组装目睹地
            filepath = new File(upload.getPath(),realFileName);
            //判断路径是否存在，如果不存在就创建一个
            if (!filepath.getParentFile().exists()) {
                filepath.getParentFile().mkdirs();
            }
            //将上传文件保存到一个目标文件当中
            file.transferTo(filepath);
            //获取其他的参数存入数据库
            //开始插入到数据库
            Map<String,Object> map=new HashMap<>();
            map.put("file_name",file_name);
            map.put("file_extra_id",Utils.createID());
            map.put("file_size",file.getSize());
            map.put("publish_date",new Date());
            map.put("publish_ip",request.getRemoteAddr());
            logger.info("正式的ip地址==》"+Utils.getLocalIp(request));
            map.put("file_name", realFileName);//投稿的名称
            map.put("file_url",filepath.getPath());
            //将文档信息上保存到数据库
            if(messageInfoService.addFileBasicInfo(map)>0){
                //开始插入到数据库
                Map<String,Object> map2=new HashMap<>();
                map2.put("file_id",Utils.createID());
                map2.put("file_name",file_name);//论文题目
                map2.put("author_place",author_place);
                map2.put("first_author",first_author);
                map2.put("touch_author",touch_author);
                map2.put("publisher_phone",publisher_phone);
                map2.put("publisher_email",publisher_email);
                map2.put("type_id",type_id);
                map2.put("cate_id",cate_id);
                map2.put("file_extra_id",map.get("file_extra_id"));
                logger.info("微信用户的ID===》"+Utils.WEIXIN_USER_ID);
                map2.put("weixin_user_id",Utils.WEIXIN_USER_ID);
                //将上传信息上保存到数据库
                int i=fileAttrInfoService.addFileAttrInfo(map2);
                logger.info("i="+i);
                return "uploadSuccess";
            }
            return "success";
        } else {
            return "fileIsNotExist";
        }
    }catch(Exception e){
        e.printStackTrace();
        return "uploadFail";
    }
}

三、当上面两步都弄好了之后又发现一个问题!那就是springboot的项目限制文件的大小

springboot1.5.8的还好网上有很多的资料，springboot2.0.0的有点难，不过最终还是解决了，我使用的是下面的这个配置

@Configuration
@SpringBootApplication
public class PublishWebApplication {
   public static void main(String[] args) {
      SpringApplication.run(PublishWebApplication.class, args);
   }
   /**
    * 文件上传配置
    * @return
    */
   @Bean
   public MultipartConfigElement multipartConfigElement() {
      MultipartConfigFactory factory = new MultipartConfigFactory();
      System.out.println(".....");
      //文件最大
      factory.setMaxFileSize("1382256KB"); //KB,MB
      /// 设置总上传数据总大小
      factory.setMaxRequestSize("1382259KB");
      return factory.createMultipartConfig();
   }
}