`

ajax 上次附件（一个或者多个）

 
阅读更多

      最近自己的项目需要开发一个ajax上传和下载的功能集成在springmvc项目中，最近公司工作比较轻松，就研究了一下这个东西，希望对大家有所帮助。

  一。上传单个文件

       1.需要jar文件

        commons-io.jar

        commons-fileupload.jar

       2.配置applicationContext.xml配置

               
    <mvc:resources mapping="/upload/**" location="/upload/"/>
 
    <!-- SpringMVC上传文件时,需配置MultipartResolver处理器 -->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <!-- 指定所上传文件的总大小不能超过800KB......注意maxUploadSize属性的限制不是针对单个文件,而是所有文件的容量之和 -->
  
    <!-- set the max upload size1MB   1048576     -->
        <property name="maxUploadSize">
            <value>82428800</value>
        </property>
        <property name="maxInMemorySize">
            <value>2048</value>
        </property>
   
    </bean>
 
    <!-- SpringMVC在超出上传文件限制时,会抛出org.springframework.web.multipart.MaxUploadSizeExceededException -->
    <!-- 该异常是SpringMVC在检查上传的文件信息时抛出来的,而且此时还没有进入到Controller方法中 -->
    <bean id="exceptionResolver" class="org.springframework.web.servlet.handler.SimpleMappingExceptionResolver">
    <property name="exceptionMappings">
        <props>
        <!-- 遇到MaxUploadSizeExceededException异常时,自动跳转到/WEB-INF/jsp/error_fileupload.jsp页面 -->
        <prop key="org.springframework.web.multipart.MaxUploadSizeExceededException">error_fileupload</prop>
        </props>
    </property>
    </bean>
 
 <!-- SpringMVC在超出上传文件限制时，会抛出org.springframework.web.multipart.MaxUploadSizeExceededException -->
 <!-- 该异常是SpringMVC在检查上传的文件信息时抛出来的，而且此时还没有进入到Controller方法中 -->
 <bean class="org.springframework.web.servlet.handler.SimpleMappingExceptionResolver">
  <property name="exceptionMappings">
   <props>
    <!-- 遇到MaxUploadSizeExceededException异常时，自动跳转到/WEB-INF/error_fileupload.jsp页面 -->
    <prop key="org.springframework.web.multipart.MaxUploadSizeExceededException">WEB-INF/error_fileupload</prop>
    <!-- 处理其它异常(包括Controller抛出的) -->
    <prop key="java.lang.Throwable">WEB-INF/500</prop>
   </props>
  </property>
 </bean>

3.新增一个上传页面

    <%@ page language="java" pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<%@ include file="/common/headcj.jsp"%>
<html>
  <head>
    <!-- 执行上传文件操作的函数 -->
      <script type="text/javascript">
          function ajaxFileUpload(){
            $.ajaxFileUpload({
       //处理文件上传操作的服务器端地址(可以传参数,已亲测可用) 
       url:'${ctx}/file/imgupload',
       secureuri:false,                       //是否启用安全提交,默认为false
       fileElementId:'myBlogImage',           //文件选择框的id属性
       dataType:'text',                       //服务器返回的格式,可以是json或xml等
       success:function(data, status){        //服务器响应成功时的处理函数
           alert(data);
           data = data.replace("<PRE>", '');  //ajaxFileUpload会对服务器响应回来的text内容加上<pre>text</pre>前后缀
           data = data.replace("</PRE>", '');
           data = data.replace("<pre>", '');
           data = data.replace("</pre>", ''); //本例中设定上传文件完毕后,服务端会返回给前台[0`filepath]
           if(data.substring(0, 1) == 0){     //0表示上传成功(后跟上传后的文件路径),1表示失败(后跟失败描述)
            $("img[id='uploadImage']").attr("src", data.substring(2));
            $('#result').html("图片上传成功<br/>");
           }else{
            $('#result').html('图片上传失败，请重试！！');
           }
       },
       error:function(data, status, e){ //服务器响应失败时的处理函数
           $('#result').html('图片上传失败，请重试！！');
       }
       });
                          
          }
      </script>
  </head>
 
  <body>
      <div>
        <input type="file" id="myBlogImage" name="imgFile"/>
        <input type="button" value="提交" onclick="ajaxFileUpload()"/>
    </div>
    <div id="result"></div>
   
  </body>
</html>

4.新增java接收方法

     /**
     * 这里这里用的是MultipartFile[] myfiles参数,所以前台就要用<input type="file" name="myfiles"/>
     * 上传文件完毕后返回给前台[0`filepath],0表示上传成功(后跟上传后的文件路径),1表示失败(后跟失败描述)
  * @throws IOException   @RequestParam("uname") String uname,
     */
 @RequestMapping(value="/fileUpload",method=RequestMethod.POST)
 @ResponseBody
 public String SaveFile(@RequestParam("uname") String uname,@RequestParam MultipartFile[] myfiles, HttpServletRequest request, HttpServletResponse response) throws IOException{
  //可以在上传文件的同时接收其它参数
 // System.out.println("收到用户[" + uname + "]的文件上传请求");
  //如果用的是Tomcat服务器，则文件会上传到\\%TOMCAT_HOME%\\webapps\\YourWebProject\\upload\\文件夹中
  //这里实现文件上传操作用的是commons.io.FileUtils类,它会自动判断/upload是否存在,不存在会自动创建
  String realPath = request.getSession().getServletContext().getRealPath("/upload");
  //设置响应给前台内容的数据格式
  response.setContentType("text/plain; charset=UTF-8");
  //设置响应给前台内容的PrintWriter对象
  PrintWriter out = response.getWriter();
  //上传文件的原名(即上传前的文件名字)
  String originalFilename = null;
  //如果只是上传一个文件,则只需要MultipartFile类型接收文件即可,而且无需显式指定@RequestParam注解
  //如果想上传多个文件,那么这里就要用MultipartFile[]类型来接收文件,并且要指定@RequestParam注解
  //上传多个文件时,前台表单中的所有<input type="file"/>的name都应该是myfiles,否则参数里的myfiles无法获取到所有上传的文件
  for(MultipartFile myfile : myfiles){
   if(myfile.isEmpty()){
    out.print("1`请选择文件后上传");
    out.flush();
    return null;
   }else{
    originalFilename = myfile.getOriginalFilename();
    System.out.println("文件原名: " + originalFilename);
    System.out.println("文件名称: " + myfile.getName());
    System.out.println("文件长度: " + myfile.getSize());
    System.out.println("文件类型: " + myfile.getContentType());
    System.out.println("========================================");
    try {
     //这里不必处理IO流关闭的问题,因为FileUtils.copyInputStreamToFile()方法内部会自动把用到的IO流关掉
     //此处也可以使用Spring提供的MultipartFile.transferTo(File dest)方法实现文件的上传
      FileUtils.copyInputStreamToFile(myfile.getInputStream(), new File(realPath, originalFilename));

    } catch (IOException e) {
     System.out.println("文件["+ originalFilename + "]上传失败,堆栈轨迹如下");
     e.printStackTrace();
     out.print("1`文件上传失败，请重试！！");
     out.flush();
     return null;
    }
   }
  }
  //此时在Windows下输出的是[D:\Develop\apache-tomcat-6.0.36\webapps\AjaxFileUpload\\upload\愤怒的小鸟.jpg]
  //System.out.println(realPath + "\\" + originalFilename);
  //此时在Windows下输出的是[/AjaxFileUpload/upload/愤怒的小鸟.jpg]
  //System.out.println(request.getContextPath() + "/upload/" + originalFilename);
  //不推荐返回[realPath + "\\" + originalFilename]的值
  //因为在Windows下<img src="file:///D:/aa.jpg">能被firefox显示,而<img src="D:/aa.jpg">firefox是不认的
  out.print("0`" + request.getContextPath() + "/upload/" + originalFilename);
  out.flush();
  return null;
 }

二 。上传多个文件

   1.修改fileupload.js文件，将form拼接部分进行修改成   

createUploadForm: function(id, fileElementId, data)
{
 //create form
    var formId = 'jUploadForm' + id[0];
    var fileId = 'jUploadFile' + id;
    var form = jQuery('<form  action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');
    if (data) {
  for ( var i in data) {
   jQuery(
     '<input type="hidden" name="' + i + '" value="'
       + data[i] + '" />').appendTo(form);
  }
 }
    for (var i = 0; i < fileElementId.length; i++) {
  var oldElement = jQuery('#' + fileElementId[i]);
  var newElement = jQuery(oldElement).clone();
  jQuery(oldElement).attr('id', fileElementId[i]);
  jQuery(oldElement).attr('name', fileElementId[i]);
  jQuery(oldElement).before(newElement);
  jQuery(oldElement).appendTo(form);
 }
    //set attributes
    jQuery(form).css('position', 'absolute');
    jQuery(form).css('top', '-1200px');
    jQuery(form).css('left', '-1200px');
    jQuery(form).appendTo('body');
 return form;
   }

 2.html上传文件

<%@ page language="java" pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<%@ include file="/common/headcj.jsp"%>
<html>
  <head>
 <script type="text/javascript" src="${ctx }/js/common/dajaxfileupload.js"></script>
    <!-- 执行上传文件操作的函数 -->
      <script type="text/javascript">
       var count = 1;
  /**
  * 生成多附件上传框
  */
  function createInput(parentId){
      count++;
      var str = '<div name="div" ><font style="font-size:12px;">附件</font>'+
      '   '+ '<input type="file" contentEditable="false" id="uploads' + count + '' +
      '" name="uploads'+ count +'" value="" style="width: 220px"/><input type="button"  value="删除" onclick="removeInput(event)" />'+'</div>';
      document.getElementById(parentId).insertAdjacentHTML("beforeEnd",str);
  }
  /**
  * 删除多附件删除框
  */
  function removeInput(evt, parentId){
     var el = evt.target == null ? evt.srcElement : evt.target;
     var div = el.parentNode;
     var cont = document.getElementById(parentId);      
     if(cont.removeChild(div) == null){
      return false;
     }
     return true;
  }
  
  function addOldFile(data){
   var str = '<div name="div' + data.name + '" ><a href="#" style="text-decoration:none;font-size:12px;color:red;" onclick="removeOldFile(event,' + data.id + ')">删除</a>'+
      '   ' + data.name +
      '</div>';
      document.getElementById('oldImg').innerHTML += str;
  }
  
  function removeOldFile(evt, id){
      //前端隐藏域，用来确定哪些file被删除，这里需要前端有个隐藏域
      $("#imgIds").val($("#imgIds").val()=="" ? id :($("#imgIds").val() + "," + id));
      var el = evt.target == null ? evt.srcElement : evt.target;
      var div = el.parentNode;
      var cont = document.getElementById('oldImg');   
      if(cont.removeChild(div) == null){
          return false;
      }
      return true;
  }
  
  function ajaxFileUploadImg(id){
   //获取file的全部id
   var uplist = $("input[name^=uploads]");
   var arrId = [];
   for (var i=0; i< uplist.length; i++){
    if(uplist[i].value){
     arrId[i] = uplist[i].id;
     alert(uplist[i].id);
    }
   }
   $.ajaxFileUpload({
       url:'${ctx}/file/imguploads',
       secureuri:false,
       fileElementId: arrId,  //这里不在是以前的id了，要写成数组的形式哦！
       dataType: 'json',
       data: {          //需要传输的数据
          },
       success: function (data){
        alert("成功！");
       },
       error: function(data){
        alert("失败！");
       }
     });
   }
      </script>
 </head>
 
  <body>
      <input type="button"  value="添加附件" onclick="createInput('more');" />
  <div id="more"></div>
     <input type="button" onclick="ajaxFileUploadImg('3')" value="上传">
  </body>
</html>

3.新增java文件

/**
  * ajax 上传多个附件文件的后台接收处理
  * @param multipartRequest
  * @param response
  * @throws Exception
  */
 @RequestMapping(method=RequestMethod.POST, value="/imguploads")
 public void imgUpload(
      MultipartHttpServletRequest multipartRequest,
      HttpServletResponse response) throws Exception {
      response.setContentType("text/html;charset=UTF-8");
      Map<String, Object> result = new HashMap<String, Object>();
     
      //获取多个file
      for (Iterator it = multipartRequest.getFileNames(); it.hasNext();) {
        String key = (String) it.next();
        MultipartFile imgFile = multipartRequest.getFile(key);
        if (imgFile.getOriginalFilename().length() > 0) {
          String fileName = imgFile.getOriginalFilename();
                                  //改成自己的对象哦！
          Object obj = new Object();
          //Constant.UPLOAD_GOODIMG_URL 是一个配置文件路径
          try {
            String uploadFileUrl = multipartRequest.getSession().getServletContext().getRealPath(Constants.UPLOAD_GOODIMG_URL);
            File _apkFile = saveFileFromInputStream(imgFile.getInputStream(), uploadFileUrl, fileName);
            if (_apkFile.exists()) {
              FileInputStream fis = new FileInputStream(_apkFile);
            } else
              throw new FileNotFoundException("apk write failed:" + fileName);
            List list = new ArrayList();
            //将obj文件对象添加到list
            list.add(obj);
            result.put("success", true);
          } catch (Exception e) {
            result.put("success", false);
            e.printStackTrace();
          }
        }
      }
  //    String json = new Gson().toJson(result,new TypeToken<Map<String, Object>>() {}.getType());
      JSONObject json = JSONObject.fromObject(result);
      response.getWriter().print(json);
    }

   //保存文件
    private File saveFileFromInputStream(InputStream stream, String path,
        String filename) throws IOException {
      File file = new File(path + "/" + filename);
      FileOutputStream fs = new FileOutputStream(file);
      byte[] buffer = new byte[1024 * 1024];
      int bytesum = 0;
      int byteread = 0;
      while ((byteread = stream.read(buffer)) != -1) {
        bytesum += byteread;
        fs.write(buffer, 0, byteread);
        fs.flush();
      }
      fs.close();
      stream.close();
      return file;
    }

 

总结 ：大致我看了一下它的fileajaxupload.js基本上就做了一个form拼接提交的原理。没有什么。

分享到：
| bootstrap前端
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery大附件穿带滚动条

    在IT领域，尤其是在Web开发中，处理大附件的上传是一个常见的需求。"jquery大附件带滚动条"这个项目就是针对这种需求提供的一种解决方案。它利用了JQuery JavaScript库和SWFUpload组件，来实现高效、稳定且用户友好...

    上传附件到指定服务器API接口

    在IT行业中，API（应用程序...综上所述，"上传附件到指定服务器API接口"涉及到了API设计、文件上传、服务器部署、安全措施以及性能优化等多个层面的知识，每个环节都需要仔细规划和实施以确保系统的稳定和高效运行。

    多附件形式的上传及其下载

    - **前端实现**：在用户界面层，多附件上传通常需要一个可以同时选择多个文件的控件，例如HTML5中的`&lt;input type="file" multiple&gt;`元素。用户可以选择多个文件进行上传。 - **文件预处理**：前端可能需要对文件...

    ftp上传大附件

    总之，FTP上传大附件涉及到多个步骤和技术，包括选择合适的FTP库、设置正确的连接参数、处理大文件流、以及确保上传的安全性和可靠性。通过学习和实践这个demo，你可以掌握这些关键点，并在实际项目中应用。

    类似于163邮箱的附件上传

    - 多文件选择：`multiple`属性允许用户同时选择多个文件进行上传。 - 预览功能：使用FileReader API读取文件内容，展示图片或文档预览。 - 进度条显示：通过监听`progress`事件，可以实时更新上传进度。 2. **...

    一个MP3上传下载的案例，，，也是一个挺不错的例子哦

    总的来说，这个MP3上传下载案例涵盖了Web开发中的多个核心概念，不仅有助于学习者理解文件操作的基本原理，还能让他们熟悉Java Web应用的开发流程，提升实际编程技能。通过实践这个案例，可以提升对HTTP协议、文件I/...

    UGiA PHP UPLOADER v0.2

    再者，"支持多文件上传以及与表单混合上传"意味着用户可以同时选择并上传多个文件，而不仅仅是单个文件。这大大提升了工作效率，特别是对于需要上传大量文件的场景。此外，它还能与其他表单元素集成，允许用户在提交...

    文件上传下载+预览功能

    2. **多文件上传**：支持批量上传，用户可一次性选择多个文件进行上传。 3. **断点续传**：大文件上传时，如果网络中断，可以从上次中断的地方继续上传。 4. **权限控制**：根据用户角色或权限设定，控制文件的访问...

    springboot+vue实现超大文件分片极速上传与下载完整前后端源码

    在本项目中，"springboot+vue实现超大文件分片极速上传与下载完整前后端源码"，我们探讨的是一个高效、稳定的大型文件处理方案，特别适合处理GB级别的文件。这个系统结合了Spring Boot后端框架和Vue.js前端框架，以...

    上传下载系统源码(upload)

    【上传下载系统源码(upload)】是一个典型的Web应用功能，主要涉及用户在网站上上传文件以及下载已上传文件的功能。这种系统广泛应用于各种网站和平台，例如社交媒体、论坛、云存储服务等，使得用户能够方便地分享和...

    文件上传与下载模块

    - **多文件上传**：HTML5引入了`multiple`属性，允许用户一次选择多个文件进行上传。 - **Multipart请求**：文件上传涉及二进制数据传输，通常使用HTTP的`multipart/form-data`编码类型，这需要服务器端解析...

    专题资料（2021-2022年）IT项目招标书.doc

    1. **硬件配置**：招标书中指定使用两台DELL R710服务器（一主一备），配备双核E5410 2.33GHz CPU、16GB内存以及基于RAID5的6个300GB 15Krpm硬盘，为新EMAIL系统提供稳定的硬件基础。 2. **用户规模**：系统需满足...

    科汛网络系统源码EshopV4.0sp1 Acc

    18、修复flash幻灯片标签显示标题时，多了一个空行 19、修复图片系统批量更改模板时出现ADODB.Recordset错误'800a0e79'. 20、修复自定义模型基类型为文章且没有选择文章内容系统字段时，提示类型不匹配:'HTMLEncode'...

Magicbox
Global site tag (gtag.js) - Google Analytics