AJAX File Upload文件上传前后交互 #98

RandolphChin · 2018-09-04T09:26:13Z

使用$.ajaxFileUpload([options]) jQuery插件完成异步上传功能，在github上可以下载,也可以参考CSDN上的一篇文章.

单文件上传
语法：$.ajaxFileUpload([options])

options参数说明：
1、url　　　　　　　　　　上传处理程序地址。　　
2，fileElementId　需要上传的文件域的ID，即<input type="file">的ID。
3，secureuri　　　是否启用安全提交，默认为false。
4，dataType　　　服务器返回的数据类型。可以为xml,script,json,html。如果不填写，jQuery会自动判断。
5，success　　　　提交成功后自动执行的处理函数，参数data就是服务器返回的数据。
6，error　　　　　　提交失败自动执行的处理函数。
7，data 　　　　　　自定义参数。这个东西比较有用，当有数据是与上传的图片相关的时候，这个东西就要用到了。
8, type 　　　　　　当要提交自定义参数时，这个参数要设置成post

错误提示:

1，SyntaxError: missing ; before statement错误
　　如果出现这个错误就需要检查url路径是否可以访问
2，SyntaxError: syntax error错误
　　如果出现这个错误就需要检查处理提交操作的服务器后台处理程序是否存在语法错误
3，SyntaxError: invalid property id错误
　　如果出现这个错误就需要检查文本域属性ID是否存在
4，SyntaxError: missing } in XML expression错误
　　如果出现这个错误就需要检查文件name是否一致或不存在

User`s Guide
How to Use

一单文件上传

spring mvc实现上传需添加该操作类依赖包commons-fileupload-1.2.2.jar commons-io-2.0.1.jar

1 HTML代码

<script src="/jquery-1.7.1.js" type="text/javascript"></script>
    <script src="/ajaxfileupload.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $(":button").click(function () {
                if ($("#file1").val().length > 0) {
                    ajaxFileUpload();
                }
                else {
                    alert("请选择图片");
                }
            })
        })
     function ajaxFileUpload() {
       $.ajaxFileUpload
       (
          {
            url: '/updoad/transcriptsUpload.do', //用于文件上传的服务器端请求地址
            secureuri: false, //一般设置为false
            fileElementId: 'file1', //文件上传空间的id属性  <input type="file" id="file" name="file" />
            dataType: 'HTML', //返回值类型 一般设置为json
            success: function (data, status)  //服务器成功响应处理函数
               {
                 alert(data);
                 $("#img1").attr("src", data);
                 if (typeof (data.error) != 'undefined') {
                      if (data.error != '') {
                         alert(data.error);
                      } else {
                          alert(data.msg);
                      }
                  }
               },
            error: function (data, status, e)//服务器响应失败处理函数
              {
                alert(e);
              }
            }
        )
        return false;
    }
    </script>
</head>
<body>
    <p><input type="file" id="file1" name="file" /></p>
    <input type="button" value="上传" />
    <p><img id="img1" alt="上传成功啦" src="" /></p>
</body>
</html>

2 Controller代码

@RequestMapping("/updoad/transcriptsUpload.do")
	@ResponseBody
public String NetRouteFileUpload400401(HttpServletRequest request,HttpServletResponse response) 
   throws IOException {
	MultipartFile formFile = null;
	// 解析器解析request的上下文
	CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(
			request.getSession().getServletContext());
        // 判断请求中是否包含文件
	if (multipartResolver.isMultipart(request)) {
		MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
		formFile = multiRequest.getFile("receiveFile_paid"); // 页面input标签的name
	}
	response.resetBuffer();
	response.setHeader("Pragma", "No-cache");
	response.setHeader("Cache-Control", "no-cache,no-store,max-age=0");
	response.setCharacterEncoding("UTF-8");
	response.setDateHeader("Expires", 0);
	String email = request.getParameter("eMail");
	String payPath = Constant.UPLOAD_PATH;
	// 检查路径是否存在，不存在则创建
	File file = new File(payPath);
	if (!file.exists() && !file.isDirectory()) {
		file.mkdir();
	}
	processFile(formFile, payPath, request, response);// 文件上传
	return null;
}

public String processFile(MultipartFile formFile, String payPath,	HttpServletRequest request, 
    HttpServletResponse response)	throws IOException {
	formFile.getContentType();
	try {
		saveFile(payPath + formFile.getOriginalFilename(),formFile.getBytes());
	} catch (Exception e) {
		e.printStackTrace();
	}
	return null;
}

   //保存文件的方法
  public void saveFile(String filePath, byte[] content) throws IOException {
    BufferedOutputStream bos = null;
    try {
      File file = new File(filePath);
      //判断文件路径是否存在
      if (!file.getParentFile().exists()) {
        //文件路径不存在时，创建保存文件所需要的路径
        file.getParentFile().mkdirs();
      }
      //创建文件（这是个空文件，用来写入上传过来的文件的内容）
      file.createNewFile();
      bos = new BufferedOutputStream(new FileOutputStream(file));
      bos.write(content);
    } catch (FileNotFoundException e) {
      throw new FileNotFoundException("文件不存在。");
    } finally {
      if (null != bos) {
        bos.close();
      }
    }

二多文件上传

需要注意的是多文件上传，使用的仍旧是 ajaxfileupload.js 只不过需要更改一下js内容.已经测试过了，更改ajaxfileupload.js内容之后，仍然可以运用在单文件上上传

Step 1 :spring-servlet.xml 内容如下：

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <!-- 指定所上传文件的总大小不能超过5000KB。注意maxUploadSize属性的限制不是针对单个文件，而是所有文件的容量之和 -->
        <property name="maxUploadSize" value="52428800"/>
        <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</prop>
            </props>
        </property>
    </bean>

Step 2 :Controller内容如下：

@RequestMapping(value = "/upload/transcriptsMutipulUpload.do", method = RequestMethod.POST)
public void uploadOrder(MultipartHttpServletRequest multipartRequest, HttpServletRequest request,
			HttpServletResponse response) throws IOException {
	String calculateType = request.getParameter("calculateType");
	String processType = request.getParameter("processType");
	response.setContentType("text/html;charset=UTF-8");
	String result = null;
	try {
		for (Iterator<String> it = multipartRequest.getFileNames(); it.hasNext();) {
			String key = (String) it.next();
			MultipartFile orderFile = multipartRequest.getFile(key);
				if (orderFile.getOriginalFilename().length() > 0) {
				String realPath = Constant.UPLOAD_PATH;
				FileUtils.copyInputStreamToFile(orderFile.getInputStream(),
						new File(realPath, orderFile.getOriginalFilename()));
				transcriptBusi.register(orderFile, realPath, calculateType, processType);
			}
		}
		result = "{result:'上传成功'}";
		LogFactory.getLog().error("批量文件上传成功");
	} catch (Exception e) {
		result = "{result:'上传失败'}";
		LogFactory.getLog().error(this, e);
		LogFactory.getLog().error("批量文件上传失败");
	}
	response.getWriter().print(result);
}

Step 3 : ajaxfileupload.js 修改

Run server

修改里面的一个方法 createUploadForm 方法,主要是for循环更改可以接收多个上传文件对应的input框的 id值

  createUploadForm: function(id, fileElementId, data) 
    { 
        //create form     
        var formId = 'jUploadForm' + id; 
        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; 
    }

Step 4 :前端视图和JS

# must be unique in a given SonarQube instance  
  <div>
   <form id="orderUploadForm" name="orderUploadForm" enctype="multipart/form-data" method="post">
    <table class="myResume">
     <tr>
      	 <td class="panel-header">File One:</td>
     	 <td><input id="files1" name="files1" type="file"></td>
     </tr>
     <tr>
     	 <td class="panel-header">File Two:</td>
     	 <td><input  id="files2" name="files2" type="file" ></td>
     </tr>
    </table>
   </form>
  </div>
  <div >
   <a href="javascript:uploadOrder()" >保存</a>
  </div>
 </div> 

 function uploadOrder() {
  //var r = $("#orderUploadForm").form('validate');
  //if(!r) {
  // return ;
  //}
  var uplist = $("input[name^=files]");
  var arrId = [];
  for ( var i = 0; i < uplist.length; i++) {
   if (uplist[i].value) {
    arrId[i] = uplist[i].id;
   }
  }

  $.ajaxFileUpload({
   url : "upload.do",//用于文件上传的服务器端请求地址
   secureuri : false,//一般设置为false
   fileElementId : arrId,//文件上传空间的id属性  <input type="file" id="files1" name="files1" /><input type="file" id="files2" name="files2" />
   dataType : 'json',//返回值类型 一般设置为json
   success : function(data, status) //服务器成功响应处理函数
   {
    if (data) {
       alert("提示", data.result, "info");
    } else {
       alert("提示", data.result, "error");
    }
   },
   error : function(data, status, e)//服务器响应失败处理函数
   {

   }
  });
 }

温馨提示：
SpringMVC上传文件时，需要配置MultipartResolver 多媒体解析器

<bean class="org.springframework.web.multipart.commons.CommonsMultipartResolver" 
id="multipartResolver">
    <property name="defaultEncoding" value="utf-8"/>
    <property name="maxUploadSize" value="10485760000"/>
    <property name="maxInMemorySize" value="40960"/>
</bean>

Controller 也可以使用 StandardServletMultipartResolver 方式写

参考使用StandardServletMultipartResolver进行文件上传

/**
     * 在方法签名中使用MulitpartHttpServletRequest类型。
     * 
     * @param request
     * @return
     */
    @RequestMapping(value = "/commUploadB")
    @ResponseBody
    public JSONObject commUploadB(MultipartHttpServletRequest request) {
        JSONObject json = new JSONObject();
        json.put("succ", false);
        try {
            MultipartFile file = request.getFile("uploadFileB");// 与页面input的name相同
            File imageFile = new File("d:/upload2.jpg");// 上传后的文件保存目录及名字
            file.transferTo(imageFile);// 将上传文件保存到相应位置
            json.put("succ", true);
            return json;
        } catch (Exception e) {
            e.printStackTrace();
            return json;
        }
    }

    /**
     * 在方法签名中使用MultipartFile类型，并使用@RequestPart注解。
     * 
     * @param uploadFileC
     * @return
     */
    @RequestMapping(value = "/commUploadC")
    @ResponseBody
    public JSONObject commUploadC(@RequestPart("uploadFileC") MultipartFile uploadFileC) {
        JSONObject json = new JSONObject();
        json.put("succ", false);
        try {
            File imageFile = new File("d:/upload3.jpg");// 上传后的文件保存目录及名字
            uploadFileC.transferTo(imageFile);// 将上传文件保存到相应位置
            json.put("succ", true);
            return json;
        } catch (Exception e) {
            e.printStackTrace();
            return json;
        }
    }

The text was updated successfully, but these errors were encountered:

RandolphChin added the Js label Sep 4, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

AJAX File Upload文件上传前后交互 #98

AJAX File Upload文件上传前后交互 #98

RandolphChin commented Sep 4, 2018 •

edited

Loading

AJAX File Upload文件上传前后交互 #98

AJAX File Upload文件上传前后交互 #98

Comments

RandolphChin commented Sep 4, 2018 • edited Loading

一 单文件上传

1 HTML代码

2 Controller代码

二 多文件上传

Step 1 :spring-servlet.xml 内容如下：

Step 2 :Controller内容如下：

Step 3 : ajaxfileupload.js 修改

Run server

Step 4 :前端视图和JS

Controller 也可以使用 StandardServletMultipartResolver 方式写

RandolphChin commented Sep 4, 2018 •

edited

Loading

一单文件上传

二多文件上传