如何使用Ajax进行文件与其他参数的上传功能-创新互联

这篇文章主要为大家展示了“如何使用Ajax进行文件与其他参数的上传功能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何使用Ajax进行文件与其他参数的上传功能”这篇文章吧。

成都创新互联公司服务项目包括宿松网站建设、宿松网站制作、宿松网页制作以及宿松网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,宿松网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到宿松省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!

操作步骤:

1 导入jar包:

我们在使用文件上传时,需要使用到两个jar包,分别是commons-io与commons-fileupload,在这里我使用的两个版本分别是2.4与1.3.1版本的,需要使用JS文件与jar包最后会发给大家一个连接(如何失效请直接我给留言,我会及时更改,谢谢)。

2 修改配置文件:

当我们导入的jar包是不够的,我们需要使用到这些jar包,由于我当时使用的是SSM框架,所以我是在application-content.xml中配置一下CommonsMultipartResolver,具体配置方法如下:

 
   
   104857600 
   
   
   4096 
   
 

3 JSP文件:

大家对form表单提交问价的方式很熟悉,但是我们有很多情况下并不能直接使用form表单方式直接提交。这时候我们就需要使用Ajax方式提交,Ajax有很多的好处,比如当我们不需要刷新页面获希望进行局部刷新的时候,我们就可以使用Ajax。下面是我的表单提交的JSP页面,其中包含JS的详细步骤和HTML文件:

<%@ page language="java" contentType="text/html; charset=GBK"
 pageEncoding="GBK"%>
<%@taglib prefix="c" uri="/tupian/20230522/
<%@ include file="../commons/taglibs.jsp"%>






发布资讯
 
 
  
 function save(){
  var typeId = $("#type_span_info").attr("data-id");
   if (typeof (typeId) == "undefined") {
   $("#type_p_info").show();
   return;
  } else {
   $("#type_p_info").hide();
  }
  var title = $("#title_input_info").val();
  var summary = $("#summary_input_info").val();
  var content = $("#content_textarea_info").val();
  $.ajaxFileUpload({
   url : "${ctx}/info/doUpload",
   secureuri : false,//是否需要安全协议
   fileElementId : 'file',
   type : 'POST', //文件提交的方式
   dataType : 'string',
   cache : false, //是否进行页面缓存
   async : true, // 是否同步提交
   success : function(data) { 
     $.ajax({
     url : '${ctx}/info/addInfo?fileUrl='+data,
     type : 'post',
     data:{title:title,summary:summary,content:content,typeId:typeId},
     async : false,
     success : function(result) {
      if (result == 1) { 
       $("#del_prompt_p").text("添加成功");
       fnError3();
      } else if (result == 2) {
       $("#del_prompt_p").text("添加失败")
       fnError2();
      } else {
       $("#del_prompt_p").text("系统错误");
       fnError2();
      }
     } 
    }); 
   }
   });  
 }
 



 
 
  
   
    
     
      
     
                             

         发布资讯         

       
                                                              

*标题

                                                                           

                                                              

*摘要

                                                 

                                    

*内容

                                                              

                                    

*选择行业

            请选择行业!

                                                                 请选择              
                                                                                                                                                                                                                                  发布                            取消                                              

上面的代码是我在项目实际开发的过程中所用的代码,具体的CSS文件与JS文件我已经删掉了,但是不会影响具体的操作,大家使用的时候只需要把其中的class文件删掉了就可以了。好了,我们在说一说上面的代码。首先为大家解释一下ctx的作用,在我们项目开发的过程中,我们要求必须使用绝对路径,所有{ctx}是我们封装好的一个东西,就是我们的服务器地址+端口号+项目名称。当我们使用的时候,只需要引用一下文件,就是上面直接使用的<%@ include file=”../commons/taglibs.jsp”%>,当我们用的时候直接使用${ctx}就可以,大家在使用的时候就直接使用自己的本机地址端口号与项目名称就可以。后面的/resources/new_js/jquery.js就是我们要使用的jqery.js文件的存放地址。
其实在上面的Ajax的操作中,我相当于做了两次的Ajax的提价,但是在第一次提交的时候,后台给我们返回一个参数,就是我们的文件存放路径与文件名称,在第二次提交的时候,我们将这些参数与其他参数同时上传到后台,并将这些参数保存到数据库中,以便我们使用。

* 4 后台代码:

//文件上传
@RequestMapping(value = "/doUpload", method = RequestMethod.POST, produces = "text/html; charset=UTF-8")
@ResponseBody
 public String doUpload(HttpServletRequest request, HttpServletResponse response) throws IOException {
  List fileNames = null;
  if (request instanceof MultipartHttpServletRequest) {
   // process the uploaded file
   logger.info("=====进入文件类型选择=====");
   fileNames = uploadAttachment(request, "file");
  }
  String url = "";
  if (fileNames.size() > 0) {
   for (int i = 0; i < fileNames.size(); i++) {
    url = url + fileNames.get(i);
    if(i < fileNames.size() - 1){
     url = url + ",";
    }
   }
  }
  return url;
 } 
//文件上传的工具类
public List uploadAttachment(HttpServletRequest request, String type) throws IOException {
  MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
  List files = multipartRequest.getFiles(type);
  logger.info("数据长度========>>>>>>>>>>" + files.size());
  Calendar now = Calendar.getInstance();
  int year = now.get(Calendar.YEAR);
  int month = now.get(Calendar.MONTH) + 1;
  String realPath = PropertiesUtil.getProperty("realPath");
  System.err.println("realpath=====>>>>>" + realPath);
  //String savePath = request.getSession().getServletContext().getRealPath("/") + "p_image\\" + type + "\\" + year+ "\\" + month + "\\";
  String savePath = "government"+ File.separator + "image"+ File.separator + year+ File.separator + month + File.separator;
  logger.info("保存路径=====>" + savePath);
  List fileNames = new ArrayList();
  for (MultipartFile multipartFile : files) {
   logger.info("--" + multipartFile.getOriginalFilename());
   String fileName = multipartFile.getOriginalFilename();
   String prefix = fileName.substring(fileName.lastIndexOf(".") + 1);
   String custName = "" + System.currentTimeMillis() + "." + prefix;
   if (UsedUtil.isNotNull(fileName)) {
    File targetFile = new File(realPath+savePath, custName);
    // fileName = year+"-"+month+"-"+fileName;
    if (!targetFile.exists()) {
     targetFile.mkdirs();
     multipartFile.transferTo(targetFile);
    }
    try {
    } catch (Exception e) {
     e.printStackTrace();
    }
    fileNames.add(savePath + custName);
   }
  }
  return fileNames;
 }
//添加咨询
@RequestMapping(value = "/addInfo", method = RequestMethod.POST)
@ResponseBody
 public Integer addInfo(HttpServletRequest request, HttpServletResponse response,
   @RequestParam String fileUrl) {
  InfoBean bean = new InfoBean();
  if(UsedUtil.isNotNull(fileUrl)){
   bean.setImagePath(fileUrl);
  }
  Map paramMap = ControllerUtil.request2Map(request);
  bean.setTitle((String) paramMap.get("title"));
  bean.setSummary((String) paramMap.get("summary"));
  bean.setContent((String) paramMap.get("content"));
  bean.setTypeId((String)paramMap.get("typeId"));
  return infoService.insInfo(bean);
 }

在上面的代码中我们可以看到,在文件第一次上传的过程中,我们首先进入到doUpload中,然后使用uploadAttachment工具类,并将文件上传到服务器中,在上传的过程中,我首先做了一个文件名称的操作,就是获取当前时间的毫秒数,虽然不能绝对保证,但是到并发量小的时候可以保证不会造成文件名称重复。然后,我将文件上传的路径的上传地址写到了.properties中,这样的好处是当我们想更换文件上传的路径时,我们就可以直接修改.properties文件,而读取.properties文件的具体方式在我的另一篇文章中讲到。最后,我们在开发的过程中,文件保存一般是保存到文件服务器中,而文件服务器一般是在Linux中,而在不同的服务器中,路径是使用斜杠还是反斜杠是不同的,所有我在这里面使用了File.separator来代替,File.separator在不同的系统中可以自动生成斜杠获反斜杠。


以上是“如何使用Ajax进行文件与其他参数的上传功能”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


当前文章:如何使用Ajax进行文件与其他参数的上传功能-创新互联
文章链接:http://pwwzsj.com/article/ceejcj.html