这里有新鲜出炉的 jQuery 示例,程序狗速度看过来!
jQuery 是一个兼容多浏览器的 javascript 框架,核心理念是 write less,do more(写得更少, 做得更多)。jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布,吸引了来自世界各地的众多 JavaScript 高手加入,由 Dave Methvin 率领团队进行开发。
这篇文章主要介绍了使用 jQuery.form.js/springmvc 框架实现文件上传功能,非常具有参考借鉴价值,感兴趣的朋友一起学习吧
使用的技术有 jquery.form.js 框架, 以及 springmvc 框架。主要实现异步文件上传的同时封装对象,以及一些注意事项。
功能本身是很简单的,但是涉及到一些传递参数类型的问题。例如:jquery 的 ajax 方法与 jquery.form.js 中的 ajaxSubmit 方法的参数,具体细节将在下一篇博客中分享。
重点: html 表格三要素: action="fileUpload/fileUpload" method="post" enctype="multipart/form-data";
1. 最简单的表单直接提交
html 代码:
- <body>
- <form action="fileUpload/fileUpload" method="post" enctype="multipart/form-data">
- <input type="text" name="password">
- <input type="file" name="file">
- <input type="text" name="username">
- <input type="submit" value="submit">
- </form>
- <button id="button">
- 提交
- </button>
- </body>
java 代码(具体的 springmvc 配置,包括文件上传的配置参考 / article/16/0728/233914.html)
- @Controller
- @RequestMapping("/fileUpload")
- public class FileUpload {
- @RequestMapping("/fileUpload")
- @ResponseBody
- public String FileUpload1(@RequestParam("file")MultipartFile file/*, @RequestParam("username")String username*/){
- System.out.println("------------------------------- "+ file.getSize());
- if(!file.isEmpty()){
- System.out.println("Process file: "+file.getOriginalFilename() );
- try {
- FileUtils.copyInputStreamToFile(file.getInputStream(), new File("c:\\temp\\imooc\\", System.currentTimeMillis()+ file.getOriginalFilename()));
- } catch (IOException e) {
- e.printStackTrace();
- }
- }
- return "NewFile";
- }
- }
2. 使用 jquery.form.js 的 ajaxSubmit 方法
html 代码以及 java 代码保持不变,给 id=button 的按钮添加事件
- $("#button").click(function(){
- var hideForm = $('form');
- var options = {
- dataType : "json",
- /*data: {'file': $("input[type=file]").val(), "username": '123', password: "123"},*/
- beforeSubmit : function() {
- alert("正在上传");
- },
- success : function(result) {
- alert('成功上传!');
- },
- error : function(result) {
- }
- };
- hideForm.ajaxSubmit(options);
- });
3. 在后台使用一个 User 对象接收 username 和 password。
- <form action="fileUpload/fileUpload" method="post" enctype="multipart/form-data">
- <input type="file" name="file">
- <input type="submit" value="submit">
- </form>
有可能你会按照下面的步骤做: 封装表单数据作为一个 json 对象, 给上面的 js 代码添加 data
- data: {
- 'file': $("input[type=file]").val(),
- 'user': {
- "username": '123',
- password: "123"
- }
- }
在此处其实是画蛇添足,这种情况下发送的请求的详细情况如图:
此时页面会报错 415。
--------------------------------------------------------------
最合理的代码应该是:html 代码与 1 相同, js 代码与 2 相同, java 代码
- public String FileUpload1(@RequestParam("file")MultipartFile file, User user){
而且 User、前面不能加 @RequestBody.。
以上内容是小编给大家介绍的使用 jQuery.form.js/springmvc 框架实现文件上传功能,希望对大家有所帮助,如果大家想了解更多精彩内容,敬请关注 phperz 网站!
来源: http://www.phperz.com/article/17/0402/265833.html