FileApi的文件上传基础

本文介绍了一种利用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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

做个文艺程序员

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值