jquery实现文件异步上传
前言
这里用了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实现文件异步上传的更多相关文章
- Jquery FormData文件异步上传 快速指南
网站中文件的异步上传是个比较麻烦的问题,不过现在通过jquery 可以很容易的解决这个问题: 使用jquery2.1版本,较老版本不支持异步文件上传功能: 表单代码: <form id=&quo ...
- struts1 & jquery form 文件异步上传
1.概述 还在用struts1?是的,在地球的没写地方,落后的生产方式还在运转(老项目). 从 继承org.apache.struts.action.Action, 继承org.apache.stru ...
- 【转】JQuery插件ajaxFileUpload 异步上传文件(PHP版)
前几天想在手机端做个异步上传图片的功能,平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错,但是由于手机不支持flash,所以不得不再找一个文件上传插件来用了.后来发现a ...
- JQuery插件ajaxFileUpload 异步上传文件(PHP版)
太久没写博客了,真的是太忙了.善于总结,进步才会更快啊.不多说,直接进入主题. 前几天想在手机端做个异步上传图片的功能,平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错 ...
- 文件的上传(表单上传和ajax文件异步上传)
项目中用户上传总是少不了的,下面就主要的列举一下表单上传和ajax上传!注意: context.Request.Files不适合对大文件进行操作,下面列举的主要对于小文件上传的处理! 资源下载: 一. ...
- 普通文件的上传(表单上传和ajax文件异步上传)
一.表单上传: html客户端部分: <form action="upload.ashx" method="post" enctype="mul ...
- MVC文件上传04-使用客户端jQuery-File-Upload插件和服务端Backload组件实现多文件异步上传
本篇使用客户端jQuery-File-Upload插件和服务端Badkload组件实现多文件异步上传.MVC文件上传相关兄弟篇: MVC文件上传01-使用jquery异步上传并客户端验证类型和大小 ...
- SpringMVC + AJAX 实现多文件异步上传
转自:https://www.jianshu.com/p/f3987f0f471f 今天,我就这个问题来写一篇如何用 SpringMVC + AJAX 实现的多文件异步上传功能.基本的代码还是沿用上篇 ...
- 文件的上传(1)(表单上传和ajax文件异步上传)
文件的上传(表单上传和ajax文件异步上传) 项目中用户上传总是少不了的,下面就主要的列举一下表单上传和ajax上传!注意: context.Request.Files不适合对大文件进行操作,下面列举 ...
随机推荐
- Orchard扩展 自定义后台管理导航菜单 Admin Menu
金天:学习一个新东西,就要持有拥抱的心态,如果固守在自己先前的概念体系,就会有举步维艰的感觉. 金天:看源码永远是Coder学习的最快捷路径. 看本文需要对Orchard大致体系, 特别是Mo ...
- [VMware]设置VM虚拟机随系统自动启动
设置步骤: 1.找到VM的安装路径,右键vmware发送到桌面快捷方式 2.右键桌面快捷方式的属性,看到目标的属性框 3.找到需要自启动的虚拟机路径,如: D:\QC_VM\Clone of Wind ...
- http://runjs.cn/
http://runjs.cn/ RunJS - 在线编辑.展示.分享.交流你的 JavaScript 代码
- Android 开发之 Android 开发的起步
前言 Android 开发的起步 我们可以先来看看百科上面怎么说? 百度百科上 Android的介绍 一.Windows环境下在线搭建Android环境. 1. 下载 Android开发工具. JD ...
- Android开发学习总结(一)——搭建最新版本的Android开发环境
Android开发学习总结(一)——搭建最新版本的Android开发环境(转) 最近由于工作中要负责开发一款Android的App,之前都是做JavaWeb的开发,Android开发虽然有所了解,但是 ...
- [实践] ubuntu下编译安装ambari
ambari是一个Hadoop套件的管理工具,可以方便部署.管理及监控.最初开发时使用的就是RH系的Linux,只支持RHEL.CentOS5/6.OEL.SLES,暂不支持Ubuntu:可我的需求就 ...
- ArcGis 10+Oracle发布WFS-T服务,无法更新Feature的解决方法
现象: 前端采用Openlayers,更新Feature时服务器端返回的XML提示更新错误 原因: 参考:http://support.esri.com/en/knowledgebase/techar ...
- linux网络相关配置文件
linux系统一般来说分为两大类:1.RedHat系列:Redhat.Centos.Fedora等:2.Debian系列:Debian.Ubuntu等. linux系统中,TCP/IP网络是通过若干个 ...
- [转]ASP.NET 2.0中GridView无限层复杂表头的实现
本文转自:http://blog.csdn.net/net_lover/article/details/1306211 实现方法就是给单元格填充我们想要的格式代码. C# <%@ Page La ...
- 自动化测试selenium+java 第一章
selenium元素的定位以及操作 1. 元素的定位 Selenium 自动化,我们需要做的最基本的事情就是在页面找到元素并通过脚本程 序去操作这个元素,实现模拟人工操作.我们有多种定位元素的方式可以 ...