FileApi的文件上传基础

最新推荐文章于 2022-10-26 09:56:36 发布

做个文艺程序员

最新推荐文章于 2022-10-26 09:56:36 发布

阅读量529

点赞数 1

CC 4.0 BY-SA版权

分类专栏： java开发文章标签： javascript java

本文链接：https://blog.youkuaiyun.com/qq_23625847/article/details/52754503

java开发专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种利用HTML5 File API实现文件上传的方法，包括前端页面设置、关键性代码实现及后端处理流程。通过具体实例展示了如何选择文件、上传并处理上传过程中的进度反馈。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一次准备梳理一下一年多来学到的知识！

FileAPI：A set of JavaScript tools for working with files.

此处只写一点点自己项目中涉及到的文件上传的部分。

首先明确了目的，是要上传文件使用h5的file

<pre name="code" class="html"><input id="file" class="file" name="file" type="file" multiple />

之后引用FileApi.js和jquery

<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>

<script type="text/javascript">
   window.FileAPI = {
        staticPath: 'FileApi.js的目录' // path to '*.swf'
   };
</script>
<script type="text/javascript" src="../fileapi/FileAPI.min.js"></script>

接下来就是关键性代码

var input = document.getElementById("file");//此处获取file对象必须要用dom方式

updata中是json格式的需要传到后台的参数，自定义就可以

FileAPI.event.on(input, "change", function (evt){
	
	var file = FileAPI.getFiles(evt)[0];
	var updata={
			uuid:$("#huuid").val(),
			opid:$("#oid").val()
		}
		var xhr1 = FileAPI.upload({
	       url: './doUpload.do',
	       files: { file: file},
	       imageOriginal:false,
	       data:updata,
	       progress: function (evt){},
	       complete: function (err, xhr){
				//点击后mask显示，并在中心显示mess
			   var text1 = xhr.responseText;
	  	   
	    	   
	       }
	    });})

最后就是后台接受的代码了

/**
	 * 
	 * 上传文件
	 * @param file
	 * @param uuid
	 * @param opid
	 * @return
	 * @throws IOException 
	 */
	@ResponseBody//模板
	@RequestMapping("/doUpload.do")
	public void doUpload(
			@RequestParam(value = "file", required = true) MultipartFile file,
			HttpServletResponse response) throws IOException {
		String result = "";
		String path = ContextLoader.getCurrentWebApplicationContext()
				.getServletContext().getRealPath("/file");
		String name = "自定义";// 保存文件名字
		String fileName = file.getOriginalFilename();
		String suffix = FilenameUtils.getExtension(fileName);
		File targetFile = new File(path, name + "." + suffix);
		// 保存
		try {
			file.transferTo(targetFile);
		} catch (IllegalStateException e) {
			e.printStackTrace();
		} catch (IOException e) {
			e.printStackTrace();
		}
		
		response.setContentType("text/xml;charset=utf-8");
		response.setHeader("Cache-Control", "no-cache");
		String json = JackJson.fromObjectToJson(result);
		response.getWriter().println(json);
	}

当然在配置文件中也要控制文件上传的配置，我项目中使用的是springMVC框架

<bean id="multipartResolver"
		class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
		<property name="defaultEncoding">
			<value>UTF-8</value>
		</property>
		<property name="maxUploadSize">
			<value>10485760</value><!-- 10M -->
		</property>
		<property name="maxInMemorySize">
			<value>4096</value>
		</property>
        <property name="resolveLazily" value="true" />
        <!--resolveLazily属性启用是为了推迟文件解析，以便在UploadController 中捕获文件大小异常--> 
	</bean>

写到这里全文就结束了，第一次梳理，不喜勿喷，谢谢！！！

本文参考：https://github.com/mailru/FileApi