前言

这里用了2个JS插件,一个是Jquery原生js,我的版本是jquery-1.7.2.min.js,另一个是jquery.form.js。这个form.js 是关键,不可少哦。另外,

我的服务器端用的是Play Framework,版本是2.1。下面是代码部分,贴出的是关键部分:

1.前端代码

html:

<form id="form1" method="POST" action="/image/upload" ENCTYPE="multipart/form-data">
  <input id="uploadFile" type="file" name="myfile" />
</from>

Javascript:

$("#uploadFile").change(function(){
var message = "t";
$("#form1").ajaxSubmit({
method : "POST",
success : function(data){
//成功
        
        if(data == "ok"){
          alert("上传成功")
        }else{
          alert("上传失败");
        }
            },
error : function(){
alert("网络错误,请稍后重新尝试!");
}
});
});

2.服务端代码

    public static void upload(File myfile){

String msg = "fail";
try{
//图片写入路径,此处我的位置是项目的根目录
File temp = new File(myfile.getName());
//输入文件流
FileInputStream input = new FileInputStream(myfile);
//输出文件流
FileOutputStream out = new FileOutputStream(temp); //每次写入的字节的大小
byte [] b = new byte[1024];
//文件长度
int n; while((n=input.read(b)) != -1){
//写入字节
out.write(b, 0, n);
} input.close();
out.flush();
out.close();
msg = "ok";
}catch(Exception e){
Logger.error("Image.upload()", e.getMessage());
}
renderJSON(msg);
}

jquery实现文件异步上传的更多相关文章

  1. Jquery FormData文件异步上传 快速指南

    网站中文件的异步上传是个比较麻烦的问题,不过现在通过jquery 可以很容易的解决这个问题: 使用jquery2.1版本,较老版本不支持异步文件上传功能: 表单代码: <form id=&quo ...

  2. struts1 & jquery form 文件异步上传

    1.概述 还在用struts1?是的,在地球的没写地方,落后的生产方式还在运转(老项目). 从 继承org.apache.struts.action.Action, 继承org.apache.stru ...

  3. 【转】JQuery插件ajaxFileUpload 异步上传文件(PHP版)

    前几天想在手机端做个异步上传图片的功能,平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错,但是由于手机不支持flash,所以不得不再找一个文件上传插件来用了.后来发现a ...

  4. JQuery插件ajaxFileUpload 异步上传文件(PHP版)

    太久没写博客了,真的是太忙了.善于总结,进步才会更快啊.不多说,直接进入主题. 前几天想在手机端做个异步上传图片的功能,平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错 ...

  5. 文件的上传(表单上传和ajax文件异步上传)

    项目中用户上传总是少不了的,下面就主要的列举一下表单上传和ajax上传!注意: context.Request.Files不适合对大文件进行操作,下面列举的主要对于小文件上传的处理! 资源下载: 一. ...

  6. 普通文件的上传(表单上传和ajax文件异步上传)

    一.表单上传: html客户端部分: <form action="upload.ashx" method="post" enctype="mul ...

  7. MVC文件上传04-使用客户端jQuery-File-Upload插件和服务端Backload组件实现多文件异步上传

    本篇使用客户端jQuery-File-Upload插件和服务端Badkload组件实现多文件异步上传.MVC文件上传相关兄弟篇: MVC文件上传01-使用jquery异步上传并客户端验证类型和大小  ...

  8. SpringMVC + AJAX 实现多文件异步上传

    转自:https://www.jianshu.com/p/f3987f0f471f 今天,我就这个问题来写一篇如何用 SpringMVC + AJAX 实现的多文件异步上传功能.基本的代码还是沿用上篇 ...

  9. 文件的上传(1)(表单上传和ajax文件异步上传)

    文件的上传(表单上传和ajax文件异步上传) 项目中用户上传总是少不了的,下面就主要的列举一下表单上传和ajax上传!注意: context.Request.Files不适合对大文件进行操作,下面列举 ...

随机推荐

  1. 【转载】小米2进入recovery的方法

    用过M1的朋友都多多少少的了解到~进入recovery是关机下同时 按 音量(+)+电源键. 其实M2也一样,但是我觉得是有点区别的. 在M1的时候,只要同时长按这两个键就可以的了. 但是M2呢?我发 ...

  2. olacle数据库员工表的创建,及插入数据,添加约束,删除列,查询数据的sql语句

    ---删除原有的员工表drop TABLE employee;---创建员工表CREATE TABLE employee       (       empno NUMBER(4) NOT NULL, ...

  3. 在SQL2008R2查询分析器出错(在执行批处理时出现错误。错误消息为: 目录名称无效。)

    在用SQL2008R2查询分析器时 SELECT * FROM 表名; 出错: 在执行批处理时出现错误.错误消息为: 目录名称无效. 原因: 在打开查询分析器时,用360软件清空了临时文件(只是偶尔1 ...

  4. BIG biang教你误删oracle 怎么办,

    今天无意中在网上看到了关于oracle误删除数据恢复的一条信息,发现的确很好使,下面就我的测试向大家汇报下. 1. select * from t_viradsl2 t         //查询t_v ...

  5. MyEclipse中SVN的常见的使用方法

    本次主要内容: 一 .导入项目 (Checkout).从svn资源库检出 二 .更新 (Update) 三.锁(对要修改的文件加锁,防止文件冲突) 四.提交(项目修改后的提交) 五.解锁 六.查看历史 ...

  6. SSH 端口映射(一)

    转载:http://blog.csdn.net/a351945755/article/details/21785647,http://blog.csdn.net/gaoming655/article/ ...

  7. hdu 3064 twoNumber

    twoNumber Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 2048/1024 K (Java/Others) Total Su ...

  8. git一些常用设置

    用法:git config [选项] 配置文件位置    --global              使用全局配置文件    --system              使用系统级配置文件    -- ...

  9. java Annotation Demo

    Java 1.5引入了annotation,这个功能非常好用,是用c#等语言借鉴过来的一个特性. 首先编译器本身支持一些像overrides,supresswarning之类的注解. Spring,j ...

  10. 探索 OpenStack 之(9):深入块存储服务Cinder (功能篇)

    继研究了Neutron之后,继续Nova的外围研究之旅.本站是研究块存储服务Cinder. 0.验证环境 环境包括: 1.一个controller节点,运行nova-api, nova-schedul ...