ajax 文件上传,ajax
ajax 文件上传,ajax
啥也不说了,直接上代码!
<input type="file" id="file" name="myfile" οnclick="clearProgressInfo()"/> <span id="progressInfo" style="display:none;"> <progress id="progressBar" value="0" max="100"></progress> <span id="percentage"></span> </span><br/> <input type="button" οnclick="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 "";} }
转载于:https://www.cnblogs.com/jll-blog/p/4532663.html
ajax 文件上传,ajax相关推荐
- ORM中的事务和锁、Ajax异步请求和局部刷新、Ajax文件上传、日期时间类型的Json、多表查询图书系统
一.ORM中的事务和锁 事务 事务要确保原子性 """ 事务ACID原子性:不可分隔的最小单位一致性:跟原子性是相辅相成隔离性:事务之间相互不干扰持久性:事务一旦确认永久 ...
- ajax文件上传data,ajax文件上传-FormData()
HTML: JS: $("input[type='button']").on('click', upfile); /** * [upfile 文件上传] * @return {[O ...
- ajax iframe实现文件上传,iframe实现Ajax文件上传效果示例
avascript部分 ajax 文件上传~~ window.οnlοad=function(){ var form=document.getElementsByTagName('form')[0]; ...
- 转: 如何实现jQuery的Ajax文件上传
[PHP文件上传] 在开始之前,我觉得是有必要把通WEB上传文件的原理简单说一下的. 实际上,在这里不管是PHP,JSP,还是ASP处理上传的文件,其实都是WEB早已把文件上传到服务器了,我们只是运用 ...
- 关于jQuery在Asp.Net Mvc 框架下Ajax文件上传的实现
1. 实现传统的网络文件上传解决方案 首先,我先实现一个传统的网络文件上传方案,建立一个web页面,我还需要一个<form>和两个<input>元素就能解决问题,如在Index ...
- iframe ajax上传,ajax--iframe模拟ajax文件上传效果
js无权读取本地的文件,so不能上传文件但是 有这几种方法 1 iframe伪装 jquery-uploaded-file 2 swf插件 (这个不讲,是一个单独的软件 3 html5 iframe模 ...
- Ajax(form表单文件上传、请求头之contentType、Ajax传递json数据、Ajax文件上传)
form表单文件上传 上菜 file_put.html <form action="" method="post" enctype="multi ...
- [代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传
[代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传 原文 [代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传 Fine Upload ...
- html如何显示上传进度条,HTML5 Ajax文件上传进度条如何显示
这篇文章主要介绍了HTML5 Ajax文件上传进度条是如何显示的,基于原生html5实现,不需要falsh支持,进度可以自定义显示,控制灵活,对HTML5上传进度条感兴趣的小伙伴们可以参考一下 原本打 ...
- 上传文件ajax,ajax 文件上传
ajax 文件上传 用户名: 文件:
最新文章
- Zabbix 3.0 从入门到精通(zabbix使用详解)
- pandas常用函数说明及速查表
- np.random.choice()用法
- golang中的strings.IndexRune
- CentOS8下安装docker
- C语言在main中输入2个整数ab,2014年计算机等级二级C语言程序设计习题
- 想要成为JAVA高手的25个学习目标
- Java基础入门笔记-Getter与Setter
- html5复习分类,HTML5考试复习资料.doc
- php漏洞黑掉数据库,WDCPnbsp;add_user.php任意数据库添加任意用户漏洞分析
- C#初学者们,请离代码生成器远点!!!
- spark1.0和2.0的区别_Spark2.1.0——Spark初体验
- 思科模拟器Cisco Packet Tracer 7.3 for Mac 安装和汉化(带安装包和汉化包)
- 计算机温度控制系统论文,基于单片机的温度采集控制系统
- WEB安全之:密码穷举破解
- Android Studio 配置 NDK 开发编译环境
- 计算机二级关于ppt背景音乐,计算机二级考试真题-PPT-校摄影社团优秀作品展
- 通过优矿API python获取财报
- 大数据茶馆-决策树系列
- 国内外知名云服务公司介绍