第一次准备梳理一下一年多来学到的知识!
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