ajax 文件上传,ajax
ajax 文件上传,ajax
啥也不说了,直接上代码!
<input type="file" id="file" name="myfile" onclick="clearProgressInfo()"/>
<span id="progressInfo" style="display:none;">
<progress id="progressBar" value="0" max="100"></progress>
<span id="percentage"></span>
</span><br/>
<input type="button" onclick="UpladFile()" value="上传" />
js代码
function UpladFile() {
var fileObj = document.getElementById("file").files[0]; // js 获取文件对象
var FileController = "/file/saveFile.do"; // 接收上传文件的后台地址 // FormData 对象
var form = new FormData();
form.append("author", "hooyes"); // 可以增加表单数据
form.append("file", fileObj); // 文件对象 // XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
xhr.open("post", FileController, true);
xhr.onload = function() {
// alert("上传完成!");
}; document.getElementById('progressInfo').style.display = "";
xhr.upload.addEventListener("progress", progressFunction, false); xhr.send(form);
} function clearProgressInfo()
{
document.getElementById('progressInfo').style.display='none';
document.getElementById("progressBar").value = 0;
document.getElementById("percentage").innerHTML = "";
} function progressFunction(evt) {
var progressBar = document.getElementById("progressBar");
var percentageDiv = document.getElementById("percentage");
if (evt.lengthComputable) {
progressBar.max = evt.total;
progressBar.value = evt.loaded;
percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%";
}
}
java后台处理:
import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.FileOutputStream;
import java.io.IOException; import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; import org.apache.commons.fileupload.util.Streams;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import org.springframework.web.multipart.MultipartResolver;
import org.springframework.web.multipart.commons.CommonsMultipartResolver;
import org.springframework.web.servlet.mvc.multiaction.MultiActionController; import com.okcoin.util.Logs; @Controller
@RequestMapping(value="/file/*.do")
public class FileController extends MultiActionController{ public String saveFile(HttpServletRequest request,HttpServletResponse response) throws IOException
{
MultipartResolver resolver = new CommonsMultipartResolver(request.getSession().getServletContext());
MultipartHttpServletRequest multipartRequest = null;
try {
multipartRequest = resolver.resolveMultipart(request);
} catch (Exception e) {
Logs.geterrorLogger().error("AdminAccountController submitVerifyFile 非常的请求");
} //接收文件
MultipartFile documentFile = multipartRequest.getFile("file");
//获取文件名
String documentFileName=documentFile.getOriginalFilename();
System.out.println("FileName:" + documentFileName); BufferedInputStream in = new BufferedInputStream(documentFile.getInputStream());
BufferedOutputStream out = new BufferedOutputStream(new FileOutputStream("D:\\Users\\" + documentFileName));
Streams.copy(in, out, true);
System.out.println("copy finished.");
return "";
}
}
ajax 文件上传,ajax的更多相关文章
- python 全栈开发,Day75(Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件)
昨日内容回顾 基于对象的跨表查询 正向查询:关联属性在A表中,所以A对象找关联B表数据,正向查询 反向查询:关联属性在A表中,所以B对象找A对象,反向查询 一对多: 按字段:xx book ----- ...
- Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件
一.Django与Ajax AJAX准备知识:JSON 什么是 JSON ? JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻 ...
- AJAX文件上传实践与分析,带HTML5文件上传API。
对于HTML5已经支持AJAX文件上传了,但如果需要兼容的话还是得用一点小技巧的,HTML5等等介绍,先来看看以前我们是怎么写的. 网上可能会有一些叫AJAX文件上传插件,但在AJAX2.0之前是不可 ...
- 兼容ie的jquery ajax文件上传
Ajax文件上传插件很多,但兼容性各不一样,许多是对ie不兼容的,另外项目中是要求将网页内容嵌入到桌面端应用的,这样就不允许带flash的上传插件了,如:jquery uploadify...悲剧 对 ...
- jQuery插件AjaxFileUpload实现ajax文件上传
转自:http://www.cnblogs.com/linjiqin/p/3530848.html jQuery插件AjaxFileUpload用来实现ajax文件上传,该插件使用非常简单,接下来写个 ...
- 转: 如何实现jQuery的Ajax文件上传
[PHP文件上传] 在开始之前,我觉得是有必要把通WEB上传文件的原理简单说一下的.实际上,在这里不管是PHP,JSP,还是ASP处理上传的文件,其实都是WEB早已把文件上传到服务器了,我们只是运用上 ...
- [代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传
原文 [代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传 Fine Uploader(http://fineuploader.com/)是一个实现 ajax 上传文件 ...
- php+ajax文件上传
php+ajax文件上传 html: <input id="user_real_name" class="input_show" type="t ...
- springmvc+ajax文件上传
环境:JDK6以上,这里我是用JDK8,mysql57,maven项目 框架环境:spring+springmvc+mybaits或spring+springmvc+mybatis plus 前端代码 ...
随机推荐
- Tree2cycle
Problem Description A tree with N nodes and N-1 edges is given. To connect or disconnect one edge, w ...
- (java) Merge k sorted linked lists and return it as one sorted list. Analyze and describe its complexity.
/** * Definition for singly-linked list. * public class ListNode { * int val; * ListNode next; * Lis ...
- RAM和DDR
DDR内存现在渐渐成为内存市场中新的宠儿,因其合理的性价比从其诞生以来一直受到人们热烈的期望,希望这一新的内存产品全面提升系统的处理速度和带宽,就连对Rambus抱有无限希望的Intel公司也向外界宣 ...
- Magic of David Copperfield II(奇偶性)
题目大意:这是一个魔术游戏,首先把你的手指放在一个左上角的格子里面,然后魔术师说你可以移动K1步,移动完之后,他会删除一些方格,并且说,你肯定不在这里,删除的方格不可以再去了,然后让你再走K2步,继续 ...
- 使用ECharts报表统计公司考勤加班,大家加班多吗?
最近个项目已经连续加班1个月多,因为公司经常有在外面客户现场或出差的情况,人事每个月初会把上个月的份考勤打卡记录全部发出来,让我们对自己的考勤,突然想到可根据大家打卡时间记录统计每天工作时间,看大家是 ...
- 【大盛】HTC one/M7 ROM 最新本地化OrDroid8.2.6 高级、快速设置 永久root 更多自定义 稳定 流畅
了解更多:点击下载ROM和学习更多 ROM版本 HTC-one_OrDroid8.2.6 ROM作者 雪狼团队·大盛 http://weibo.com/DaShengdd Android版本 Andr ...
- C# 实现关闭按钮隐藏窗体而不退出
private void OpenNewMxdFrm_FormClosing(object sender, FormClosingEventArgs e) { e.Cancel = true; thi ...
- java通过解析文件获取apk版本等信息
import java.io.ByteArrayInputStream; import java.io.IOException; import java.io.InputStream; import ...
- WebKit历史项管理的实现
历史项管理依据标准定义,由Page管理一个Joint Session History, 包括了各个子Frame的历史项.逻辑上相应例如以下的关系: 从上面看三个层次:Page,Frame,以及JS B ...
- Block之变量作用域
在使用block的过程中经常会调用不同类型.不同作用域的变量,如果对这些变量作用域的理解稍有偏差,就会出现问题.故此特意整理出block中会经常使用到的几种变量,如有补充,欢迎指出. 1. 局部变量 ...