前言

这里用了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. Orchard扩展 自定义后台管理导航菜单 Admin Menu

    金天:学习一个新东西,就要持有拥抱的心态,如果固守在自己先前的概念体系,就会有举步维艰的感觉. 金天:看源码永远是Coder学习的最快捷路径.     看本文需要对Orchard大致体系, 特别是Mo ...

  2. [VMware]设置VM虚拟机随系统自动启动

    设置步骤: 1.找到VM的安装路径,右键vmware发送到桌面快捷方式 2.右键桌面快捷方式的属性,看到目标的属性框 3.找到需要自启动的虚拟机路径,如: D:\QC_VM\Clone of Wind ...

  3. http://runjs.cn/

    http://runjs.cn/ RunJS - 在线编辑.展示.分享.交流你的 JavaScript 代码

  4. Android 开发之 Android 开发的起步

    前言  Android 开发的起步 我们可以先来看看百科上面怎么说? 百度百科上 Android的介绍 一.Windows环境下在线搭建Android环境. 1. 下载 Android开发工具. JD ...

  5. Android开发学习总结(一)——搭建最新版本的Android开发环境

    Android开发学习总结(一)——搭建最新版本的Android开发环境(转) 最近由于工作中要负责开发一款Android的App,之前都是做JavaWeb的开发,Android开发虽然有所了解,但是 ...

  6. [实践] ubuntu下编译安装ambari

    ambari是一个Hadoop套件的管理工具,可以方便部署.管理及监控.最初开发时使用的就是RH系的Linux,只支持RHEL.CentOS5/6.OEL.SLES,暂不支持Ubuntu:可我的需求就 ...

  7. ArcGis 10+Oracle发布WFS-T服务,无法更新Feature的解决方法

    现象: 前端采用Openlayers,更新Feature时服务器端返回的XML提示更新错误 原因: 参考:http://support.esri.com/en/knowledgebase/techar ...

  8. linux网络相关配置文件

    linux系统一般来说分为两大类:1.RedHat系列:Redhat.Centos.Fedora等:2.Debian系列:Debian.Ubuntu等. linux系统中,TCP/IP网络是通过若干个 ...

  9. [转]ASP.NET 2.0中GridView无限层复杂表头的实现

    本文转自:http://blog.csdn.net/net_lover/article/details/1306211 实现方法就是给单元格填充我们想要的格式代码. C# <%@ Page La ...

  10. 自动化测试selenium+java 第一章

    selenium元素的定位以及操作 1. 元素的定位 Selenium 自动化,我们需要做的最基本的事情就是在页面找到元素并通过脚本程 序去操作这个元素,实现模拟人工操作.我们有多种定位元素的方式可以 ...