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

标签： ajax | 发表时间：2014-06-16 19:39 | 作者：一米天空

出处：http://www.iteye.com

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

一。上传单个文件

1.需要jar文件

commons-io.jar

commons-fileupload.jar

2.配置applicationContext.xml配置

<mvc:resources mapping="/upload/**" location="/upload/"/>

    
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    

    
        <property name="maxUploadSize">
            <value>82428800</value>
        </property>
        <property name="maxInMemorySize">
            <value>2048</value>
        </property>

    </bean>

    
    
    <bean id="exceptionResolver" class="org.springframework.web.servlet.handler.SimpleMappingExceptionResolver">
    <property name="exceptionMappings">
        <props>
        
        <prop key="org.springframework.web.multipart.MaxUploadSizeExceededException">error_fileupload</prop>
        </props>
    </property>
    </bean>



<bean class="org.springframework.web.servlet.handler.SimpleMappingExceptionResolver">
  <property name="exceptionMappings">
   <props>
    
    <prop key="org.springframework.web.multipart.MaxUploadSizeExceededException">WEB-INF/error_fileupload</prop>
    
    <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拼接提交的原理。没有什么。

已有 0 人发表留言，猛击->> 这里<<-参与讨论

ITeye推荐

—软件人才免语言低担保赴美带薪读研！—

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

相关 [ajax] 推荐：

原生AJAX

初识Ajax

jquery ajax 跨域请求

ajax核心js代码

反向Ajax，第1部分：Comet介绍

ajax后退解决方案（一）

反向Ajax，第2部分：WebSocket

一次Ajax查错的经历

ajax与HTML5 history pushState/replaceState实例

一个简单的AJAX示例

相关文章

订阅