Ajax进行文件与其他参数的上传功能-tutorial php-php.cn

Rumah

pembangunan bahagian belakang

tutorial php

Ajax进行文件与其他参数的上传功能

小云云

Jan 08, 2018 pm 01:43 PM

ajaxparameter

记得前一段时间，为了研究Ajax文件上传，找了很多资料，在网上看到的大部分是form表单的方式提交文件，对于Ajax方式提交文件并且也要提交表单中其他数据，发现提及的并不是很多，后来在同事的帮助下，使用ajaxfileupload最终完成了文件上传与其他提交的操作，现在分享给大家，希望大家能有有所帮助。本文主要介绍了使用Ajax进行文件与其他参数的上传功能(java开发),非常不错，具有参考借鉴价值，需要的朋友参考下吧，希望能帮助到大家。

文件上传：

操作步骤：

1 导入jar包：

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

2 修改配置文件：

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

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> 
  <property name="maxUploadSize"> 
   <value>104857600</value> 
  </property> 
  <property name="maxInMemorySize"> 
   <value>4096</value> 
  </property> 
 </bean>

3 JSP文件：

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

<%@ page language="java" contentType="text/html; charset=GBK"
 pageEncoding="GBK"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ include file="../commons/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>发布资讯</title>
 <script type="text/javascript" src="${ctx}/resources/new_js/jquery.js"></script>
 <script type="text/javascript" src="${ctx}/resources/js/ajaxfileupload.js"></script>
 <script type="text/javascript"> 
 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();
      }
     } 
    }); 
   }
   });  
 }
 </script>
</head>
<body class="body_bg">
<p class="main">
 <!--页面主体 start-->
 <p class="main_content">
  <p class="later_index clear wrap">
   <p class="later_right fr">
    <p class="roll_parent" id="roll_parent">
     <p class="scroll_parent" id="scroll_parent">
      <p class="scroll" id="scroll"></p>
     </p>
     <p class="roll_son" id="roll_son">
      <p class="later_content later_content1">
       <p class="release_name">
        <h3>
         <span>发布资讯</span>
        </h3>
       </p>
       <p class="issue_content">
        <form action="" id="form1" method="post" enctype="multipart/form-data">
         <table class="issue_tab">
          <tbody>
           <tr>
            <td><p><i>*</i><strong>标题</strong></p>
            </td>
           </tr>
           <tr>
            <td><input id="title_input_info" name="title_input_info" type="text" placeholder="最多可以输入40个字" type="text" maxlength="40"/>
            <!-- <span class="colse"></span> -->
            <p class="colse_tip"></p>
            <!-- <p class="colse_tip" id="title_p_info" style="display:hidden;">请选择标题！</p> -->
            </td>
           </tr>
           <tr>
            <td><p><i>*</i><strong>摘要</strong></p></td>
           </tr>
           <tr>
            <td><input name="summary_input_info" id="summary_input_info" type="text" placeholder="最多可以输入100个字" type="text" maxlength="100" />
            <p class="colse_tip"></p></td>
           </tr>
           <tr>
            <td><p><i>*</i><strong>内容</strong></p>
            </td>
           </tr>
           <tr>
            <td><textarea name="content_textarea_info" id="content_textarea_info"></textarea>
            <p class="colse_tip"></p></td>
           </tr>
           <tr>
            <td><p><i>*</i><strong>选择行业</strong></p>
            <p class="colse_tip" id="type_p_info" style="display:hidden;">请选择行业！</p></td>
           </tr>
           <tr>
            <td>
             <p class="next_select select_width select_bg" id="next_select0">
              <span id="type_span_info">请选择</span>
             </p>
             <p class="select_box select_top select_width" data-id="" id="select_box0">
              <ul>
               <li class="curr" data-id="2">化工</li>
               <li data-id="3">装备制造</li>
               <li data-id="4">生物医药</li>
               <li data-id="5">电子信息</li>
               <li data-id="6">其他</li>
              </ul>
             </p>
            </td>
           </tr>
           <tr>
            <td>
             <input type="button" class="isue_inp_btn" value="添加图片"/>
             <input type="text" id="issue_input_text" class="issue_text" />
             <input type="file" id="file" name="file" class="issue_file" onchange="javaScript:validate_img(this)" />
            </td>
           </tr> 
          </tbody> 
         </table>
        </form>
       </p>
       <p class="financial_pro_icon">
        <p class="financial_pro_icon_l issue_btn1">
         <a href="javaScript:save();">发布</a>
        </p>
        <p class="financial_pro_icon_r issue_btn1">
         <a href="${ctx}/info/gotoInfo?index=2">取消</a>
        </p>
       </p>
      </p>
     </p>
    </p>
   </p>
  </p>
 </p>
 <!--页面主体 end-->
</p>
</body>
</html>

上面的代码是我在项目实际开发的过程中所用的代码，具体的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<String> 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<String> uploadAttachment(HttpServletRequest request, String type) throws IOException {
  MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
  List<MultipartFile> 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<String> fileNames = new ArrayList<String>();
  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<String, Object> 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实现异步文件或图片上传功能实例分享

php网页常见文件上传功能的实现方法

javascript实现文件异步上传功能详解

Atas ialah kandungan terperinci Ajax进行文件与其他参数的上传功能. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel Berkaitan

Apakah beberapa masalah biasa yang boleh menyebabkan sesi PHP gagal?Apr 25, 2025 am 12:16 AM

Sebab -sebab kegagalan phpsession termasuk kesilapan konfigurasi, isu cookie, dan tamat tempoh sesi. 1. Ralat Konfigurasi: Semak dan tetapkan session.save_path yang betul. Masalah 2.Cookie: Pastikan kuki ditetapkan dengan betul. 3.Session Expires: Laraskan Nilai Sesi.GC_MAXLifetime untuk melanjutkan masa sesi.

Bagaimanakah anda menyebarkan isu berkaitan sesi dalam PHP?Apr 25, 2025 am 12:12 AM

Kaedah untuk masalah sesi debug dalam PHP termasuk: 1. Periksa sama ada sesi dimulakan dengan betul; 2. Sahkan penghantaran ID sesi; 3. Semak penyimpanan dan bacaan data sesi; 4. Semak konfigurasi pelayan. Dengan mengeluarkan ID dan data sesi, melihat kandungan fail sesi, dan lain-lain, anda boleh mendiagnosis dan menyelesaikan masalah yang berkaitan dengan sesi.

Apa yang berlaku jika session_start () dipanggil beberapa kali?Apr 25, 2025 am 12:06 AM

Pelbagai panggilan ke session_start () akan menghasilkan mesej amaran dan kemungkinan penggantian data. 1) PHP akan mengeluarkan amaran, menyebabkan sesi telah dimulakan. 2) Ia boleh menyebabkan penggantian data sesi yang tidak dijangka. 3) Gunakan session_status () untuk memeriksa status sesi untuk mengelakkan panggilan berulang.

Bagaimana anda mengkonfigurasi seumur hidup sesi di PHP?Apr 25, 2025 am 12:05 AM

Mengkonfigurasi kitaran hayat sesi dalam PHP boleh dicapai dengan menetapkan sesi.gc_maxlifetime dan session.cookie_lifetime. 1) session.gc_maxlifetime mengawal masa survival data sesi pelayan, 2) session.cookie_lifetime mengawal kitaran hayat kuki klien. Apabila ditetapkan ke 0, kuki tamat apabila penyemak imbas ditutup.

Apakah kelebihan menggunakan pangkalan data untuk menyimpan sesi?Apr 24, 2025 am 12:16 AM

Kelebihan utama menggunakan sesi penyimpanan pangkalan data termasuk kegigihan, skalabilitas, dan keselamatan. 1. Kegigihan: Walaupun pelayan dimulakan semula, data sesi tidak dapat berubah. 2. Skalabiliti: Berkenaan dengan sistem yang diedarkan, memastikan data sesi disegerakkan di antara pelbagai pelayan. 3. Keselamatan: Pangkalan data menyediakan storan yang disulitkan untuk melindungi maklumat sensitif.

Bagaimana anda melaksanakan pengendalian sesi tersuai di PHP?Apr 24, 2025 am 12:16 AM

Melaksanakan pemprosesan sesi tersuai dalam PHP boleh dilakukan dengan melaksanakan antara muka sessionHandlerInterface. Langkah -langkah khusus termasuk: 1) mewujudkan kelas yang melaksanakan sessionHandlerInterface, seperti CustomSessionHandler; 2) kaedah penulisan semula dalam antara muka (seperti terbuka, rapat, membaca, menulis, memusnahkan, gc) untuk menentukan kitaran hayat dan kaedah penyimpanan data sesi; 3) Daftar pemproses sesi tersuai dalam skrip PHP dan mulakan sesi. Ini membolehkan data disimpan dalam media seperti MySQL dan REDIS untuk meningkatkan prestasi, keselamatan dan skalabiliti.

Apakah ID Sesi?Apr 24, 2025 am 12:13 AM

SesionID adalah mekanisme yang digunakan dalam aplikasi web untuk mengesan status sesi pengguna. 1. Ia adalah rentetan yang dijana secara rawak yang digunakan untuk mengekalkan maklumat identiti pengguna semasa pelbagai interaksi antara pengguna dan pelayan. 2. Pelayan menjana dan menghantarnya kepada klien melalui kuki atau parameter URL untuk membantu mengenal pasti dan mengaitkan permintaan ini dalam pelbagai permintaan pengguna. 3. Generasi biasanya menggunakan algoritma rawak untuk memastikan keunikan dan ketidakpastian. 4. Dalam pembangunan sebenar, pangkalan data dalam memori seperti REDIS boleh digunakan untuk menyimpan data sesi untuk meningkatkan prestasi dan keselamatan.

Bagaimanakah anda mengendalikan sesi dalam persekitaran tanpa kerakyatan (mis., API)?Apr 24, 2025 am 12:12 AM

Menguruskan sesi dalam persekitaran tanpa kerakyatan seperti API boleh dicapai dengan menggunakan JWT atau cookies. 1. JWT sesuai untuk ketiadaan dan skalabilitas, tetapi ia adalah saiz yang besar ketika datang ke data besar. 2.Cookies lebih tradisional dan mudah dilaksanakan, tetapi mereka perlu dikonfigurasikan dengan berhati -hati untuk memastikan keselamatan.

See all articles